Free Webdesign Tutorials::Textlinks onMouseover: eyecatching colorchange animation

Textlinks onMouseOver: eyecatching colorchange animation

This script creates a unqiue color-change-animation of any textlink touched by your mouse. Easy configuration of colors that will be used by the animation-script.

Internet Explorer 4 or higher.

Touch any textlink to run the script

Configuration:

Activate the script by adding a small piece of code inside any textlink. It should look like the sample-textlink below:

<href="http://www.your.com" id="any_link_name" onMouseOver="startanimation('this.name') onMouseOut="stopanimation()">your textlink</a>

GREEN/RED: Put this code into your link-tag.
RED: Give each textlink a name of its own.

Go to the <head>-section of the script and configure the speed and the colors of the animation. That's it! Have fun 24 hours a day!Copy the following JavaScript into <Head> section.

Configuration:

Step 1: Open your webpage. Paste the following code between the <head> and </head> tags of your webpage:

// choose the colors the link-animation will rush through
var newcolor=new Array("FF0000","EE0011","DD0022","CC0033","BB0044","AA0055","990066","880077","770088","660099","5500AA","4400BB","3300CC","2200DD","1100EE","0000FF","0000FF","0000FF","0011EE","0022DD","0033CC","0044BB","0055AA","006699","007788","008877","009966","00AA55","00BB44","00CC33","00DD22","00EE11","00FF00","00FF00","00FF00","00FF00","11EE00","22DD00","33CC00","44BB00","55AA00","669900","778800","887700","996600","AA5500","BB4400","CC3300","DD2200","EE1100","FF0000","FF0000","FF0000")

// speed of animation. Smaller means faster
var pause=30

// Do not edit the values below
var timer
var animation_on=true
var thislink
var i_color=0

function startanimation(newlink) {
    if (document.all) {
        animation_on=true
        thislink=eval("document.all."+newlink+".style")
        changecolors()
    }
}

function changecolors() {
    if (animation_on) { 
        if (i_color>=newcolor.length-1) {i_color=0}
        thislink.color=newcolor[i_color]
        i_color++
        timer=setTimeout("changecolors()",pause)
    }
    else {
        clearTimeout(timer)
    }
}

function stopanimation() { 
    if (document.all) {
        animation_on=false
    }
} 
--> 
</script>

Free JavaScripts

Web Designing Made Easy	Add to Favourites	Tell a Friend
Web Designing Made Easy	Print this Page	Make Your Home Page