Skip to main content

Macam-macam Script Link Hover

link

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
Labels:

Popular posts from this blog

Profile Biodata Foto Renie Arumsari

Biodata Renie Arumsari Nama Lengkap : Agustina Renie Arum Sari Nama Lain : Renie Arumsari Asal : Yogyakarta Kebangsaan : Indonesia Pekerjaan : Aktris, Model, MC Twitter : https://twitter.com/rerenie Instagram : https://www.instagram.com/renieas Prestasi Renie Arumsari Putri Pariwisata Indonesia DIY 2017 Putri Pariwisata Indonesia Best National Costume Putri Pariwisata Indonesia Putri Bunga Miss Tea Indonesia 2017 Miss Jogjatronik Sahabat Larissa Puteri Bandara 2013 Duta Bandara Adisutjipto Sinetron Renie Arumsari 2018 – Orang Ketiga, sebagai Kartika – SCTV Sitkom : 2015 – Kos-kosan Jogja, sebagai Gendhis View this post on Instagram A post shared by Renie Arumsari (@renieas) on Jun 21, 2019 at 10:03pm PDT View this post on Instagram A post shared by Renie Arumsari (@renieas) on May 30, 2019 at 2:47am PDT ...
Read more

Read Solo Leveling Chapter 103 English Translate

Read Manhwa Solo Leveling Chapter 103 English translation . Since a portal connecting our world to a world full of monsters and creatures of all kinds appeared, some people have acquired powers and the ability to hunt them: they are called hunters. The protagonist of the story, Sung Jin-Woo, is the weakest of the rank E hunters and barely stronger than a normal human. He is nicknamed by his fellow hunters as "the weakest". One day, he and other hunters find themselves trapped in an extremely dangerous dungeon, and only a few of them survive and manage to escape. Sung Jin-Woo himself hardly survives and is the only who completes all the trials in this dungeon. He then turns into a "player" who can now see an interface showing him quests. Will he succeed in becoming the most powerful hunter? Read Solo Leveling Chapter 103 Not released yet release date : January 2020 You may also like : Manhwa similiar to solo leveling Read solo leveling 103 s...
Read more

Read Manga Solo leveling 104 English Translation

Solo Leveling is a Korean novel manhwa written by Chu-Gong, It was serialized in Papyrus and later in KakaoPage and concluded with 14 volumes and 270 chapters. In April 13, 2018, a webtoon serialization started in Korean mobile site KakaoPage drawn by artists Hyeon - Gun and Jang Sung-Rak. Read Manhwa Manga Solo Leveling 104 capitulo 104 Kyoukai tells Ten to move so she can save Shin. Banyou starts yelling at the HSU for not chasing Riboku but Mouten and Ouhon can read the situation and they head where the soldiers are gathered. Ten asks what Kyoukai's going to do and she says that she knows of a 1000 year old technique that shares life forces but she hasn't tried it before and has never seen it actually work. But she says there's no other way. Flashback: Kyoukai is attempting this technique on a dead bird and Kyoushou asks her why she's trying such a dangerous technique. She says that since it's a technique that tries to bring the dead back t...
Read more