実行例

サンプルだけの HTMLはこちらへ

Q&A

[Q]　たくさん画像があって、画像にマウスカーソルをあてるとその画像を別の画像に変えたいのですが
[Ａ]　前回のステップを改造してみましょう。

使い方

・画像を準備します (サンプルでは HTMLと同じフォルダに画像ファイルをアップロードしています）。

・画像を表示するタグを設置します。
    <A href="javascript:void(0)" onmouseover="myChgPic( 'IMG_0667.gif' , 'img0667' )" onmouseout="myChgPic( 'IMG_0667s.gif' , 'img0667' )">
    <IMG src="IMG_0667s.gif" name="img0667">
    </A>
   myChgPic() の
   第１パラメータに画像のファイル名(URL) をシングルクォートで囲って指定します。
                        ※ onmouseover はマウスカーソルが乗ったときに変更する画像を指定します。
                        ※ onmouseout はマウスカーソルが離れたときに変更する画像を指定します。

   第２パラメータに <IMG>タグの name属性でつけた任意の名前をシングルクォートで囲って指定します。

説明

画像にマウスが乗ったり離れたりすると myChgPic() を呼ぶようにしました。

パラメータには表示する画像のファイル名 (URL) と、<IMG>タグの name属性で指定した名前を指定します。
onmouseover = "myChgPic( 'IMG_0400.gif' , 'img0400' )"
onmouseout = "myChgPic( 'IMG_0400s.gif' , 'img0400' )"

myChgPic() 内部の処理は、第2パラメータで受け取った name属性の<IMG>タグの画像を、第1パラメータで受け取った画像に変更しただけです。
document.images[myImgTagName].src = myPicURL;

今回のサンプルはマウスカーソルが離れると縮小画像を表示、マウスカーソルが乗ると拡大画像を表示します。

よって、画像サイズが変わるために <IMG>タグに width や height は指定していません。
つまり、ページイメージが伸びたり縮んだりと、落ち着きのないページになっています。 (^^;
乗る／離れるの画像サイズが同じであれば、指定しましょう。
<IMG src="IMG_0141s.gif" width="320" height="240" name="img0141">
※ NC4 や OP6 は一度表示した画像サイズの変更ができません。初回表示した画像サイズに調整されます。

※ IE3 は document.images が使えないためにエラーが発生します。
<script type="text/javascript"></SCRIPT>
とすれば、IE3でエラーは発生しなくなります。

参考ステップ
Step.33 マウスカーソルが触れたらアイコン画像を変えてみましょう
Step.66 サムネイル画像をクリックして拡大画像を表示してみましょう
Step.67 マウスカーソルが触れたらアイコン画像を変えてみましょう　その２
Step.98 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょうその２
Step.100 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょうその3

▲TOP

実行例

リスト

Q&A

使い方

説明