1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fading Pic</title>
<script type="text/javascript">
//<![CDATA[
var IsIE=!!document.all;
function initialise(){
var opImg = document.getElementById('refImg').getElementsByTagName('img');
for(var i=0;i<opImg.length;i++){
if(IsIE){
opImg[i].style.filter='alpha(opacity=50)';
opImg[i].filters[0].opacity=50;
}
else{opImg[i].style.opacity='0.5';}
opImg[i].onmouseover = function(i){fadePic(this, 50, 100)}
opImg[i].onmouseout = function(i){fadePic(this, 100, 50)}
}
}
function fadePic(elt, debut, fin){
if(debut==fin){return false}
IsIE?elt.filters[0].opacity=debut:elt.style.opacity=debut/100;
debut>fin?debut-=2:debut+=2;
setTimeout(function(){fadePic(elt,debut,fin);},10);
}
//]]>
</script>
</head>
<body>
<img src="image1.jpg" alt="Image sans fading" />
<br/>
<div id="refImg">
<img src="image1.jpg" alt="Image avec fading" />
<br/>
<img src="image2.jpg" alt="Image avec fading" />
<br/>
<img src="image3.jpg" alt="Image avec fading" />
<br/>
<img src="image4.jpg" alt="Image avec fading" />
<br/>
</div>
</body>
</html> |
Partager