68 lines
1.2 KiB
HTML
68 lines
1.2 KiB
HTML
|
<!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>
|