<!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>