metanohi-misc-subsites/old-projects/x/imgfade.htm

68 lines
1.2 KiB
HTML
Raw Normal View History

2011-08-02 19:57:57 +02:00
<!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>