<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3c.org/1999/xhtml"> <head> <title>ImageFade</title> <style type='text/css'> #ia { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; position:absolute; } #ib { filter:alpha(opacity=0); -moz-opacity:0; opacity:0; position:absolute; } </style> <script type='text/javascript'> a=1 b=99 function imgfade() { ia=document.getElementById("ia") ib=document.getElementById("ib") ia.style.filter="alpha(opacity="+b+")" ia.style.mozOpacity=b/100 ia.style.opacity=b/100 ib.style.filter="alpha(opacity="+a+")" ib.style.mozOpacity=a/100 ib.style.opacity=a/100 if (a==100) ia.className="y" else if (a==0) ia.className="n" if (b==100) ib.className="y" else if (b==0) ib.className="n" if (ia.className=="y") a=a-1 else a=a+1 if (ib.className=="y") b=b-1 else b=b+1 t=setTimeout("imgfade()",50) } function stopf() { clearTimeout(t) } window.onload=imgfade </script> </head> <body> <img id='ia' src='img/i1.png' alt='' onmouseover='stopf()' onmouseout='imgfade()' /> <img id='ib' src='img/i2.png' alt='' onmouseover='stopf()' onmouseout='imgfade()' /> </body> </html>