第56回 「マウスが画像に乗ったら画像を入れ替える(DOM版)」
今回はDOM対応ブラウザでの画像の入れ替えについて説明します。
DOM (Document Object Model：ドキュメントオブジェクトモデル) に対応したブラウザでは直接タグの中にonMouseover、onMouseoutなどのイベントを使用することが可能です。前回は<a>タグのみにイベントを記述していました。今回は直接<img>タグ内にイベントを書きます。
前回のプログラムを改良し<img>タグ内にonMouseover、onMouseoutを記述したものが以下のプログラムになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" name="myIMG" onMouseover="setImgSrc('photo2.jpg')" onMouseout="setImgSrc('photo1.jpg')">
</body>
</html>
前回の<a>タグ内のイベントを、そのまま<img>タグ内に入れただけです。ただ、これだとsetImgSrc関数を呼び出すたびに、どの画像を入れ替えるかを指定しているため<img>タグごとに引数として渡す画像の名前を指定しなければなりません。<img>タグ内に書いているので以前も使ったthisを利用することができます。thisは自分自身を示し、この場合<img>タグを示す事になります。画像のURLを入れ替える、つまり自分自身のURLを入れ替えるので
this.src = 表示する画像URL
のようになります。これだけ短いと関数を使わなくてもよさそうです。
関数を使わない場合には以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<img src="photo1.jpg" onMouseover="this.src='photo2.jpg'" onMouseout="this.src='photo1.jpg'">
</body>
</html>
関数を使う場合にはthis.srcを引数として渡すのではなくthisだけを渡します。
実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgObj,imgURL)
{
imgObj.src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" onMouseover="setImgSrc(this,'photo2.jpg')" onMouseout="setImgSrc(this,'photo1.jpg')">
</body>
</html>
どちらも名前で指定しないので<img>タグのname属性は削除してあります。
次回は画像のサイズを変更するプログラムについて説明します。