マウスを乗せると絵が変わる

Netscape Navigator 3.0 や IE4.0 以降では、マウスを乗せた時に画像を変えるというテクニックを実現できます。これは、乗せない時の画像と乗せた時の画像をそれぞれ用意し、マウスが乗ったら（onMouseOver）、画像を変更（setImage）し、マウスが離れると（onMouseOut）、元の画像に戻す（setImage）という処理で実現できます。

マウスを乗せない時の画像を xxx1a.gif, xxx2a.gif, ...、マウスを乗せた時の画像を xxx1b.gif, xxx2b.gif, ...、として image ディレクトリの中に置き、次のようなHTML文書を作成してください。（コードでは、変わる画像を2つ配置する場合の例を示しています。）

<html>
<head>
<title>マウスを乗せると絵が変わる</title>
<script>
if (document.images) {
   img1 = new Image(); img1.src = "image/xxx1b.gif";
   img2 = new Image(); img2.src = "image/xxx2b.gif";
}
function setImage(img, image) {
   obj = document.getElementById(img);
   if (obj) {
      obj.src = image;
   }
}
</script>
</head>
<body>
<a href="xxx.htm"
   onmouseover="setImage('img1', 'image/xxx1b.gif')"
   onmouseout="setImage('img1', 'image/xxx1a.gif')"><img
   id="img1" src="image/xxx1a.gif"></a>
<a href="xxx.htm"
   onmouseover="setImage('img2', 'image/xxx2b.gif')"
   onmouseout="setImage('img2', 'image/xxx2a.gif')"><img
   id="img2" src="image/xxx2a.gif"></a>
</body>
</html>

img1 = ... や img2 = ... の行は無くても動作しますが、xxx1b.gif や xxx2b.gif をあらかじめ読込んでキャッシュしておくためのテクニックです。

マウスを乗せると絵が変わる

説明

実例

ソースコード