第55回 「マウスが画像に乗ったら画像を入れ替える」
今回はマウスが画像に乗ったら画像を入れ替える方法について説明します。
マウスが乗ったかどうかはonMousoverというイベントで検知することができます。多くの場合は<a>タグ内にonMouseoverイベントを書き画像を入れ替える関数を呼び出します。
<a href="#" onMouseover="呼び出す関数">
実際のプログラムは以下のようになります。呼び出される関数は前回のものと同じです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSrc('photo2.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
なぜ、このように<a>タグを使うかというと昔はonMouseoverイベントが使えるタグが限られており事実上（互換性もありますが）<a>タグしか使えなかったためです。また、多くはスワップイメージ／ロールオーバー時クリックで指定ページにジャンプさせるため<a>タグを使った方が便利で楽なためです。次回、説明しますがInternet Explorer 4、Netscape 6以降などDOM（Document Object Model）に対応したブラウザであれば直接<img>タグに書くこともできます。
さて、上記のプログラムではマウスが乗った後に画像が切り替わったままになります。マウスが離れたら元の画像に戻したい場合があります。これはonMouseoverイベントでなくonMouseOutイベントを使います。これは、それぞれ別に書くのではなく<a>タグ内に続けて書きます。
実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSrc('photo2.jpg')" onMouseout="setImgSrc('photo1.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
画像が１つの場合には上記のように直接画像の名前を指定しても問題ありませんが、複数ある場合には、どの画像を入れ替えるのかという情報が必要になります。<a>タグのonMouseover、onMouseoutイベント時に入れ替える画像のURLだけでなく、画像の名前も関数に渡します。関数側では渡された名前の画像オブジェクトのURLを入れ替えます。変数／引数に名前が入っている場合には以下のように書きます。
document.images[変数名]
実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgName,imgURL)
{
document.images[imgName].src = imgURL;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSrc('myIMG','photo2.jpg')" onMouseout="setImgSrc('myIMG','photo1.jpg')">
<img src="photo1.jpg" name="myIMG">
</a>
<a href="#" onMouseover="setImgSrc('myIMG2','photo4.jpg')" onMouseout="setImgSrc('myIMG2','photo3.jpg')">
<img src="photo3.jpg" name="myIMG2">
</a>
</body>
</html>
DOMに対応したブラウザであれば、名前を指定しなくても処理する事が可能です。
次回はDOM対応ブラウザでの画像の入れ替えについて説明します。