マウスを乗せると絵が変わるホームページ制作京都

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

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
ＳＥＯ・月次更新・リニュアルetc

京都市中京区橋弁慶町222番地
ヒライビル3階