Free JavaScript utility: link colorchange animation on rollover

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript utility: link colorchange animation on rollover
This script creates a unqiue rollover animation for any textlinks. Easy copy-and-paste installation and easy configuration of colors. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Test the script
Touch this link to start the link-animation.

Configuration
Step 1: Paste the following code between the <head>-tag and </head>-tag:

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you are required to insert a highly visible link to http://www.fabulant.com
// right into the webpage where the script
// will be displayed.

// choose the colors used for the animation. You may use as many as you like
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) {
      animation_on=true
        thislink=eval("document.getElementById('"+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() { 
        animation_on=false
} 
</script>

Step 2: Open your webpage and add a link like this:

<a href="http://www.yourdomain.com" id="any_link_id" onMouseOver="startanimation(this.id)" onMouseOut="stopanimation()">Touch me to start the animation</a>

GREEN Do not change this code.
RED: Give your textlink an id.

Step 3: Go to the <head>-section of the script and configure the speed and the colors of the animation.