画像をゆっくり入れ替える

画像の上にマウスを重ねると、ゆっくりじわじわと画像が入れ替わります。 IE4以上とNetscape6以上、Mozillaで動くはずです。


<head>
<style type="text/css"><!--
.images{position:absolute;left:100px;top:200px}
#g0{z-index:0}
#g1{z-index:1;filter:alpha(opacity=0);-moz-opacity:0}
--></style>
<script type="text/javascript"><!--
window.onload=function(){
	var g0 = document.getElementById("g0");
	var g1 = document.getElementById("g1");
	var j = 100 , i = 0;
	function image_change(){
		if(document.all&&!window.opera){
			g0.style.filter = "Alpha(opacity=" + j + ")";
			g1.style.filter = "Alpha(opacity=" + i + ")";
		}
		else if(navigator.userAgent.indexOf("Gecko/") != -1){
			g0.style.MozOpacity = String( j / 100 );
			g1.style.MozOpacity = String( i / 100 );
		}
		j-- , i++;
		if( j >= 0) setTimeout(function(){image_change()},100);			
	}
	g1.onmouseover = image_change;
};
//--></script>
</head>
<body>
<img src="画像URL" id="g0" class="images">
<img src="画像URL" id="g1" class="images">
</body>
HOMEMENU