[JS]イメージマップでロールオーバー時の画像を変更する方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]イメージマップでロールオーバー時の画像を変更する方法

スポンサード

この記事は WebScripter.jp 様の記事を参考にさせていただきました。

<img> <map> <area> によりイメージマップを利用する上で、「マウスを乗せた画像に変化を付けてリンクであることを分かりやすくしたい！」という要望に応えるカスタマイズです。

Javascript を利用すれば、ロールオーバー時の画像を変更することが可能です。

反転用の画像を用意

元画像を img.jpg、ロールオーバー時の画像を img_on.jpg などにして、ご利用環境の画像フォルダに格納しておきます。

Javascript の記述例

WebScripter.jp 様のブログで公開されているコードを、<head> 内に記述します。

<script type="text/javascript">
function changeMapImage(imgPath) {
  document.getElementById('map').src = imgPath;
}
</script>

<img> <map> <area> の記述例

以下のように onmouseover にマウスオン時の画像を、onmouseout に通常時の画像をそれぞれ2種類読み込ませるようにします。

<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 でロールオーバー

続いて、下の画像の「イメージマップ」と書かれた場所にマウスを乗せる（ロールオーバー）と、画像が切り替わります。

参考ページ
クリッカブルマップでのロールオーバー

スポンサード