マウスを乗せると絵が変わるマウスを乗せると絵が変わるNN3.0やIE4.0以降では、マウスを乗せた時に画像を変えるというテクニックを実現できます。これは、乗せない時の画像と乗せた時の画像をそれぞれ用意し、マウスが乗ったら(onMouseOver)、画像を変更(setImage)し、マウスが離れると(onMouseOut)、元の画像に戻す(setImage)という処理で実現できます。
マウスを乗せない時の画像を xxx1a.gif, xxx2a.gif, ...、マウスを乗せた時の画像を xxx1b.gif, xxx2b.gif, ...、として image ディレクトリの中に置き、次のようなHTML文書を作成してください。
<HTML> <HEAD> <TITLE>マウスを乗せると絵が変わる</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- 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)、NN3.0/4.0(Win)での動作確認をしています。また、IE2.0(Win)、NN2.0(Win)でも動作はしませんが、スクリプトエラーが発生しないことを確認しています。
