マウスが離れたら元々表示されていた画像に戻したい
次のサンプルでは、
(1) 最初はimg0.gifが表示されています
(2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます
(3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます
(4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます
ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。
素人なりの予想では、たとえば
<div onmouseover="changImg1(0,1)">やまだ</div> を
<div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div> のように
修正すればできそうな気がしましたが、試すとできませんでした。
具体的な記述をご教示いただきたく、よろしくお願い致します。
<html><head>
<script language="javascript">
<!--
if(navigator.appVersion.charAt(0)>=3) {
movimg=new Array()
movimg[0] = new Image(); movimg[0].src='img0.gif';
movimg[1] = new Image(); movimg[1].src='img1.gif';
movimg[2] = new Image(); movimg[2].src='img2.gif';
movimg[3] = new Image(); movimg[3].src='img3.gif';
};
function changImg1(imgNoA,imgNoB) {
if(navigator.appVersion.charAt(0)>=3) {
document.images[imgNoA].src=movimg[imgNoB].src;
};
};
//-->
</SCRIPT>
</head><body>
<img src="img0.gif">
<div onmouseover="changImg1(0,1)">やまだ</div>
<div onmouseover="changImg1(0,2)">すずき</div>
<div onmouseover="changImg1(0,3)">さとう</div>
</body></html>
