<html>
<head>
<script language="javascript">
function fade(element,fade_color) {
delay = 3 ; // Seconds
steps = 100 ;
interval = delay / steps * 1000 ; // mili Seconds
obj = element ;
clr1 = element.getAttribute("bgcolor").replace('#','') ;
clr2 = element.getAttribute("fdcolor").replace('#','') ;
R1 = parseInt(('0x' + clr1.substring(0,2)).toString(10)) ;
G1 = parseInt(('0x' + clr1.substring(2,4)).toString(10)) ;
B1 = parseInt(('0x' + clr1.substring(4,6)).toString(10)) ;
R2 = parseInt(('0x' + clr2.substring(0,2)).toString(10)) ;
G2 = parseInt(('0x' + clr2.substring(2,4)).toString(10)) ;
B2 = parseInt(('0x' + clr2.substring(4,6)).toString(10)) ;
SR = parseFloat((R2 - R1) / steps) ;
SG = parseFloat((G2 - G1) / steps) ;
SB = parseFloat((B2 - B1) / steps) ;
i = 1 ;
R = R1 + SR ;
G = G1 + SG ;
B = B1 + SB ;
tx = window.setInterval("change_color()", interval) ;
}
function change_color() {
obj.style.backgroundColor = RGB(R,G,B) ;
i++ ;
if (i == steps) {
window.clearInterval(tx) ;
obj.style.backgroundColor = RGB(R2,G2,B2) ;
}
R += SR ;
G += SG ;
B += SB ;
}
function RGB(RR, GG, BB) {
x = (parseInt(RR) * 256 * 256 + parseInt(GG) * 256 + parseInt(BB)).toString(16) ;
while (x.length<6) {x = "0" + x} ;
return(eval("'#" + x + "'")) ;
}
</script>
</head>
<body>
<div id="div1"
style="width:200; height:100"
bgcolor="#ff00ff"
fdcolor="#00ff00"
onmouseover="fade(this)"></div>
</body>
<script language="javascript">
dv = document.getElementById("div1");
dv.style.backgroundColor = eval("'" + dv.getAttribute("bgcolor") + "'") ;
</script>
</html>
