<img><map><area>によりイメージマップを利用する上で、「マウスを乗せた画像に変化を付けてリンクであることを分かりやすくしたい！」という要望に応えるカスタマイズです。
Javascriptを利用すれば、ロールオーバー時の画像を変更することが可能です。
反転用の画像を用意
元画像をimg.jpg、ロールオーバー時の画像をimg_on.jpgなどにして、ご利用環境の画像フォルダに格納しておきます。Javascript の記述例
WebScripter.jp 様のブログで公開されているコードを、<head> 内に記述します。|
1 2 3 4 5 |
<script type="text/javascript"> function changeMapImage(imgPath) { document.getElementById('map').src = imgPath; } </script> |
<img> <map> <area> の記述例
以下のようにonmouseoverにマウスオン時の画像を、onmouseoutに通常時の画像をそれぞれ2種類読み込ませるようにします。
|
1 2 3 4 5 |
<img id="map" src="img.jpg" alt="" usemap="#Map" /> <map name="map"> <area onmouseover="changeMapImage('img_on.jpg')" onmouseout="changeMapImage('img.jpg')" shape="rect" coords="0,150,175,299" href="#" /> </map> |
ロールオーバーのサンプル
Javascriptを利用する場合としない場合の比較です。Javascriptを利用しない
下の画像の「イメージマップ」と書かれた場所にマウスを乗せても、title=""のテキストしか表示されません。
Javascript でロールオーバー
続いて、下の画像の「イメージマップ」と書かれた場所にマウスを乗せる（ロールオーバー）と、画像が切り替わります。
参考ページ
クリッカブルマップでのロールオーバー
コメント