Macam-macam Script Link Hover

Hai sob, ketemu lagi dengan posting saya yang selanjutnya. Kali ini sejuta trik blogger ingin berbagi Macam-macam Script Link Hover. Apa sih Link Hover itu?

Link hover adalah sebutan untuk perubahan warna bila link tersebut disentubuh disentuh oleh mouse. Sebagai contoh arahkan pointer atau anak panah mouse ke salah satu menu label blog ini. Maka akan otomatis berubah warna. Maka dari itu disebut Link Hover.

Sebenarnya banyak sekali yang sudah memposting tentang link hover ini hususnya Raninbow. Dalam web asing malah disebutkan Link Fader dan lain-lain. Entah apa bedanya? Kalau menurut saya kurang lebih tidak jauh berbeda.

Baik tanpa banyak kata-kata lagi langsung saja pilih yang disuka. Kode dalam gambar kertas  di bawah adalah scrool. Jadi dimohon jangan ada yang ketinggalan! Tinggal Copas di notepad ya!. Supaya hasilnya sama dengan aslinya.

1. Rainbow (Pelangi)

    <script type='text/javascript'>

    //<![CDATA[

    var rate = 20;

    if (document.getElementById)
    window.onerror=new Function("return true")

    var objActive;  // The object which event occured in
    var act = 0;    // Flag during the action
    var elmH = 0;   // Hue
    var elmS = 128; // Saturation
    var elmV = 255; // Value
    var clrOrg;     // A color before the change
    var TimerID;    // Timer ID

    if (document.all) {
        document.onmouseover = doRainbowAnchor;
        document.onmouseout = stopRainbowAnchor;
    }
    else if (document.getElementById) {
        document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
        document.onmouseover = Mozilla_doRainbowAnchor;
        document.onmouseout = Mozilla_stopRainbowAnchor;
    }

    function doRainbow(obj)
    {
        if (act == 0) {
            act = 1;
            if (obj)
                objActive = obj;
            else
                objActive = event.srcElement;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }


    function stopRainbow()
    {
        if (act) {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }


    function doRainbowAnchor()
    {
        if (act == 0) {
            var obj = event.srcElement;
            while (obj.tagName != 'A' && obj.tagName != 'BODY') {
                obj = obj.parentElement;
                if (obj.tagName == 'A' || obj.tagName == 'BODY')
                    break;
            }

            if (obj.tagName == 'A' && obj.href != '') {
                objActive = obj;
                act = 1;
                clrOrg = objActive.style.color;
                TimerID = setInterval("ChangeColor()",100);
            }
        }
    }


    function stopRainbowAnchor()
    {
        if (act) {
            if (objActive.tagName == 'A') {
                objActive.style.color = clrOrg;
                clearInterval(TimerID);
                act = 0;
            }
        }
    }


    function Mozilla_doRainbowAnchor(e)
    {
        if (act == 0) {
            obj = e.target;
            while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
                obj = obj.parentNode;
                if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                    break;
            }

            if (obj.nodeName == 'A' && obj.href != '') {
                objActive = obj;
                act = 1;
                clrOrg = obj.style.color;
                TimerID = setInterval("ChangeColor()",100);
            }
        }
    }


    function Mozilla_stopRainbowAnchor(e)
    {
        if (act) {
            if (objActive.nodeName == 'A') {
                objActive.style.color = clrOrg;
                clearInterval(TimerID);
                act = 0;
            }
        }
    }


    function ChangeColor()
    {
        objActive.style.color = makeColor();
    }


    function makeColor()
    {
        // Don't you think Color Gamut to look like Rainbow?

        // HSVtoRGB
        if (elmS == 0) {
            elmR = elmV;    elmG = elmV;    elmB = elmV;
        }
        else {
            t1 = elmV;
            t2 = (255 - elmS) * elmV / 255;
            t3 = elmH % 60;
            t3 = (t1 - t2) * t3 / 60;

            if (elmH < 60) {
                elmR = t1;  elmB = t2;  elmG = t2 + t3;
            }
            else if (elmH < 120) {
                elmG = t1;  elmB = t2;  elmR = t1 - t3;
            }
            else if (elmH < 180) {
                elmG = t1;  elmR = t2;  elmB = t2 + t3;
            }
            else if (elmH < 240) {
                elmB = t1;  elmR = t2;  elmG = t1 - t3;
            }
            else if (elmH < 300) {
                elmB = t1;  elmG = t2;  elmR = t2 + t3;
            }
            else if (elmH < 360) {
                elmR = t1;  elmG = t2;  elmB = t1 - t3;
            }
            else {
                elmR = 0;   elmG = 0;   elmB = 0;
            }
        }

        elmR = Math.floor(elmR).toString(16);
        elmG = Math.floor(elmG).toString(16);
        elmB = Math.floor(elmB).toString(16);
        if (elmR.length == 1)    elmR = "0" + elmR;
        if (elmG.length == 1)    elmG = "0" + elmG;
        if (elmB.length == 1)    elmB = "0" + elmB;

        elmH = elmH + rate;
        if (elmH >= 360)
            elmH = 0;

        return '#' + elmR + elmG + elmB;
    }

    //]]>

    </script>

2. Link  Hover Lost (Link berubah warna kemudian akan menghilang)

<script>
/******************************************************************
*    Script name: Link fader
*    Version: 0.5
*    Date: 02.05.02
*    Usage: Freeware (as long as you don't remove this comment)
*
*    Script by: Fayez Zaheer (viol8r on #webdesign [uk.zanet.org.za])
*    Email: fayez at impenetrable.org
*    Web site: http://impenetrable.org
*     Original idea: http://anarchos.xs.mw/fade.phtml
******************************************************************/

// Make sure not to add a # to fcS and fcE - use hex values 6 characters in length ONLY
var fcS = "ffffff";
    // Original colour of your links
var fcE = "ff0000";
    // Fade to which colour?
var fBy = 5;
    // Changing this will affect how accurately the fade to colour is "reached". A value of 1 is most accurate
var speed = 10;
    // Delay in milliseconds of the change from each individual colour to the next during the fade

// Unless you want the ability to let your visitors change the
//    fade to colour, you can delete the following function
function fadeTo()
    {
        var c = prompt("What colour do you want to fade to (no #)?", "ff0000");
        convertHex(c);
        fcEr = r;
        fcEg = g;
        fcEb = b;
    }
// Stop deleting.

// IF YOU DON'T KNOW WHAT YOU ARE DOING,
// DON'T EDIT ANYTHING BEYOND THIS POINT
var r , g, b, fcEr, fcEg, fcEb, fcSr, fcSg, fcSb, fi, fo, x = 0, h = new String();

function convertHex(hex)
    {
        r = hex.substring(0, 2);
        r = parseInt(r, 16);
        g = hex.substring(2, 4);
        g = parseInt(g, 16);
        b = hex.substring(4, 6);
        b = parseInt(b, 16);
    }

convertHex(fcE);
    fcEr = r;
    fcEg = g;
    fcEb = b;

convertHex(fcS);
    fcSr = r;
    fcSg = g;
    fcSb = b;

function fadeIn(x)
    {
        if ((r > fcEr) && (r-fBy >= 0)) r -= fBy;
        if ((g > fcEg) && (g-fBy >= 0)) g -= fBy;
        if ((b > fcEb) && (b-fBy >= 0)) b -= fBy;
        if ((r < fcEr) && (r+fBy <= 255)) r += fBy;
        if ((g < fcEg) && (g+fBy <= 255)) g += fBy;
        if ((b < fcEb) && (b+fBy <= 255)) b += fBy;
        document.links[x].style.color = "rgb(" + r  + "," + g + "," + b + ")";
        if ((r == fcEr) && (b == fcEb) && (g == fcEg))
            clearInterval(fi);
    }

function fadeOut(x)
    {
        if ((r < fcSr) && (r+fBy <= 255)) r += fBy;
        if ((g < fcSg) && (g+fBy <= 255)) g += fBy;
        if ((b < fcSb) && (b+fBy <= 255)) b += fBy;
        if ((r > fcSr) && (r-fBy >= 0)) r -= fBy;
        if ((g > fcSg) && (g-fBy >= 0)) g -= fBy;
        if ((b > fcSb) && (b-fBy >= 0)) b -= fBy;
        document.links[x].style.color = "rgb(" + r  + "," + g + "," + b + ")";
        if ((r == fcSr) && (b == fcSb) && (g == fcSg))
            clearInterval(fo);
    }

function findLink()
    {
        convertHex(fcS);
        clearInterval(fo);
        clearInterval(fi);
        document.links[x].style.color = "#" + fcS;
        x = 0;
        while (!(this.id == document.links[x].id) && (x < document.links.length))
            x++;
        if (this.id == document.links[x].id)
            fi = setInterval("fadeIn(" + x  + ")", speed);
    }

if ((!document.layers) && (document.links))
    {
        for (var i = 0; i < document.links.length; i++)
            {
                document.links[i].id = "link" + i;
                document.links[i].onmouseover = findLink;
                document.links[i].onmouseout = function mouseOut() { clearInterval(fi); clearInterval(fo); fo = setInterval("fadeOut(" + x + ")", speed); };
            }
    }
</script>

3. Link Hover Blink 182 (Link berubah warna dan akan berkedip)

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
<!-- /**************************************************** Created With: PopupGenerator URL: http://www.popupgenerator.com ****************************************************/ var win=null; function NewWindow(mypage,myname,w,h,pos,infocus){ if(pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;} if(pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;} else if((pos!='center' && pos!="random") || pos==null){myleft=0;mytop=20} settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ",scrollbars=yes,location=yes,directories=yes,status=no,menubar=no,toolbar=no,resizable=yes";win=window.open(mypage,myname,settings); win.focus();} // -->
</SCRIPT>
<style>
a:hover {
color:#00FFFF;
text-decoration:blink;
border-bottom:1px dotted #003300;
}
</style>

Penting !

1. Untuk kode no1. Bisa kalian ubah kecepatan berubah warnanya pada warna hijau ganti angka lebih sedikit untuk lebih pelan, dan kebalikannya.
2. Semua kode di atas akan berjalan baik di setiap posting atau di sidebar blog. Jika di tempatkan pada urutan widget teratas. Ini dimaksudkan agar pemanggilan script pengubah warna atau hover ini lebih diprioritaskan.
3. Mohon maaf dikarenakan tutorial merupakan script. Untuk demo hasil dari script link hover tidak saya tampilkan. Sebagai gantinya silakan dicoba saja. Toh malah tau bedanya. Ya ga?

Nah, sementara itu yang dapat sejuta trik blogger berikan tentang macam-macam script link hover. Untuk selanjutnya akan diupdate lain waktu. Itu pun kalau saya dapat script yang baru. ha ha ha ha ha.

Happy Blogging! by. Sejuta Trik Blogger

SHARE THIS Share on Facebook Plus on Google+