Multi-Color Link Hover Effect

Multi-Color-Link-Effect You must have observed how my hyperlinks change color on mouse hover. Normally on mouse hover only a single color change is seen but thanks to Dynamic Drive we can now easily change the color of our links to several colors. I have modified the code a bit for simplicity. This tutorial is really simple to follow and uses a JavaScript which we will save inside Blogger so there will be no external linking at all. Let’s start now,

 

To add this Flashing Link effect to your blogs do the following,

  1. Go To Layout > Edit HTML
  2. Search For </head>
  3. And just above </head> paste the code below,

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

You can change the value of var rate = 20. This controls the speed with which links change color.

That’s All!

Preview Your Templates To see The New Change.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

23 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hi Mohd,
    This is just superb,I had been waiting for this code for a very long time .On your mail I did not change anything and now I have done it ..it is working in all my website.What a great work.Thanks a lot ..
    Manisha.

    ReplyDelete
  2. HI mohd FIRST OF ALL GRET SITE FOR BLOGGERS ON EARTH MY quarry is i tring to do step as you describe above after all complete step when i press preview page open but it only show webpage even i am not able clik anywere on webpage.can you plase tell me what is problem


    regards,
    NIL009

    ReplyDelete
  3. @nil

    Can you share the blog link where you are facing this problem?

    An Advise:-

    Always Backup your template before applying any hack

    ReplyDelete
  4. hi mohad thanks for see my query i am using xml templates my blog link is as follows www.bcsexamguru.blogspot.com


    i find here best support thanks for that

    take care
    regards,
    NIl

    ReplyDelete
  5. @nil

    Why are pressing the preview link page? It will work only once you save your template. Kindly backup your template and then paste the above code just before </head> and then hit save. Now visit your blog to see it in effect.

    ReplyDelete
  6. thank u Mohd ! for this code .I had been waiting for this code for a very long time
    Mohd i want to write a massage above the comment box so how can i write pls help me. i m use this code on my blog
    pls see my blog

    ReplyDelete
  7. @R. yadav

    To write a message to readers above comment box simply go to,
    Blogger >
    Settings >
    Comments >
    And under comments tab you will find this option Comment Form Message Write whatever you want in that box as a message to your readers.

    ReplyDelete
  8. Nice Moh I am CoPas This tutor

    ReplyDelete
  9. thanks so much for this code. i randomly stumbled across such a multi-color hover code, but just today somehow the effect disappeared from my blog? i dont remember my original one having such a long code.. but am very pleased cuz it creates exactly the same effect!! thanks and peace.

    ReplyDelete
  10. hiiii...you go there too, brooo...
    thats a great web for script....:D

    ReplyDelete
  11. waaaa...great! i've spent some days looking for this!....thanx mohammad...:D

    but can i ask you something?..;)
    can i apply the rainbow hover effect on my nav-bar background instead of the text?..like i found on wix.com homepage.....:D
    please help me...:)
    thanx in advance mohammad..:D

    ReplyDelete
  12. @BenWicked

    Well of course that is possible even without using the script. You can create an animated gif for that. But This is not something that I will suggest with respect to page load time and optimization factor. Got me?

    ReplyDelete
  13. owww..right...:P
    i can do that with using gift animation....or flash...:D
    but yeah....using gift might be slow the loading process....
    well..at first i hope i can still apply the css (if i'm not mistakenly differ between css,js or html)..it's only a few days since i first learning html,js and css..:P

    okay2...i mean..i hope i can use the script you've made for the background hover...not only the text....:D
    well..i guess i'll try to do that by modifying your script..:P
    i hope you don't mind...:D
    thank you mohammad......:D

    ReplyDelete
  14. Thank you so much, Mohammad for all your fantastic tips and tricks. I can spend hours tricking out blogger, thanks to you :)
    Wendy

    ReplyDelete
  15. Thank you so much , just like what i need

    ReplyDelete
  16. thnx a bunch !! i've been trying to find a code that actually works !!
    nw i've found it after spending much time on d net searching for it ^^

    ReplyDelete
  17. I warmly welcome all. I am glad you liked it :>

    ReplyDelete
  18. wow beautiful!!!!!!!!!!! i love it!!

    ReplyDelete
  19. Hey, Its Amazing, I was Looking for it, And Glad to Fount andother Pakistani Blogger Out There :)

    ReplyDelete