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

トップ > アラカルト > マウスを乗せると絵が変わる

説明

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) {
   if (img) {
      img.src = image;
   }
}
</script>
</head>
<body>
<a href="xxx.htm"
   onmouseover="setImage(document.img1, 'image/xxx1b.gif')"
   onmouseout="setImage(document.img1, 'image/xxx1a.gif')"><img
   name="img1" src="image/xxx1a.gif" border=0></a>
<a href="xxx.htm"
   onmouseover="setImage(document.img2, 'image/xxx2b.gif')"
   onmouseout="setImage(document.img2, 'image/xxx2a.gif')"><img
   name="img2" src="image/xxx2a.gif" border=0></a>
</body>
</html>

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

動作確認

IE4.0/5.0(Win)、IE4.0(Mac)、Netscape 3.0/4.0(Win)、JustView 3.01 での動作確認をしています。また、IE2.0(Win)、Netscape 2.0(Win)でも動作はしませんが、スクリプトエラーが発生しないことを確認しています。


Copyright (C) 1996-2001 杜甫々
http://www.tohoho-web.com/wwwxx001.htm