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

HOME > とほほのWWW入門 > アラカルト > アラカルト
1998年5月24日版
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">
<!--
function setImage() { }
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
img1 = new Image(); img1.src = "image/xxx1b.gif";
img2 = new Image(); img2.src = "image/xxx2b.gif";
function setImage(img, image) {
  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>

<SCRIPT LANGUAGE="JavaScript">〜</SCRIPT>は、古いブラウザでエラーが発生しないようにするために、setImage()というダミーの関数を宣言しています。

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


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )