Text Color Fader

Although Links and Divs are the main tags used, the effect can be applied to any tag.
Irrespective of which tag is used each ID must be unique.

Then add
onmouseover="init_col(this.id,'start colour','end colour')" onmouseout="change_col()"
to the opening tag and enter your start colour and end colour.

You can initialise the default start colour by adding style="color:#nnnnnn" to the opening tag.

<script type="text/javascript">


//Jeff
//www.huntingground.freeserve.co.uk

var fading_step=16
var timer;
var last=""
var mouse_over=1

function init_col(id,startcol,endcol){
hex_start =startcol
hex_end = endcol
if(last!=""&&last!=id){document.getElementById(last).style.color=lastcol }
start_red =Hex2dec(hex_start.substring(1,3))
start_green =Hex2dec(hex_start.substring(3,5))
start_blue =Hex2dec(hex_start.substring(5,7))
end_red =Hex2dec(hex_end.substring(1,3))
end_green =Hex2dec(hex_end.substring(3,5))
end_blue =Hex2dec(hex_end.substring(5,7))
red_step=(start_red-end_red)/fading_step
if(red_step<0){red_step= -red_step}
green_step=(start_green-end_green)/fading_step
if(green_step<0){green_step= -green_step}
blue_step=(start_blue-end_blue)/fading_step
if(blue_step<0){blue_step= -blue_step}
last=id
lastcol=hex_start
change_col()
}

function change_col(){
if(mouse_over==1){
col_red=end_red
col_green=end_green
col_blue=end_blue
now_red=start_red
now_green=start_green
now_blue=start_blue
mouse_over=0
}
else{
col_red=start_red
col_green=start_green
col_blue=start_blue
now_red=end_red
now_green=end_green
now_blue=end_blue
mouse_over=1
}
fade_col()
}

function fade_col(){
clearTimeout(timer)
if(now_red>col_red){
now_red+= -red_step
red_dir=0
}
else{
now_red+= red_step
red_dir=1
}
if(now_green>col_green){
now_green+= -green_step
green_dir=0
}
else{
now_green+= green_step
green_dir=1
}
if(now_blue>col_blue){
now_blue+= - blue_step
blue_dir=0
}
else{
now_blue+= blue_step
blue_dir=1
}
if(red_dir==1&&now_red>col_red||red_dir==0&&now_red<col_red){now_red=col_red}
if(green_dir==1&&now_green>col_green||green_dir==0&&now_green<col_green){now_green=col_green}
if(blue_dir==1&&now_blue>col_blue||blue_dir==0&&now_blue<col_blue){now_blue=col_blue}
timer=setTimeout("fade_col()", 10); // speed
if(now_red==col_red&&now_green==col_green&&now_blue==col_blue){clearTimeout(timer)}
document.getElementById(last).style.color = "RGB("+parseInt(now_red)+","+parseInt(now_green)+","+parseInt(now_blue)+")"
}

var hexChars = "0123456789ABCDEF";
function Hex2dec(HexVal){
HexVal = HexVal.toUpperCase();
decVal = hexChars.indexOf(HexVal.substring(0,1)) * 16
decVal += hexChars.indexOf(HexVal.substring(1));
return decVal;
}

</script>

Fading Text