【Javascript】クリッカブルマップでロールオーバー

またレガシーなテクニックです。が、どうしても使わなければ解決できない案件があったので、備忘に記します。


画像の一部分をボタンにしてリンクを設置できるクリッカブルマップ、イメージマップという言い方が一般的なんでしょうか。一つの画像に複数のリンクを付けたい時などは便利です。

リンク領域にマウスが乗った時にわかりやすいようにロールオーバーを追加してみます。
色々方法はあると思いますが、シンプルにJavascriptで画像自体を差し替える方法でやってみます！

HTML

画像にクリッカブルマップを設置します。

<img src="/img/01.jpg" alt="" width="400" height="200" usemap="#map">
<map name="map">
<area shape="circle" coords="200,100,50" href="#">
</map>

もう一枚ロールオーバー用の画像を準備します。

02.jpgと名前を付けました。

Javascript

画像を差し替えるJavascriptを書きます。

function changeMapImage(imgPath) {
	document.getElementById('map').src = imgPath;
}

HTML内にJavascriptを動かす指示を入れます。

<img src="/img/01.jpg" alt="" width="400" height="200" usemap="#map" id="map">
<map name="map">
<area shape="circle" coords="200,100,50" href="#" onmouseover="changeMapImage('/img/02.jpg')" onmouseout="changeMapImage('/img/01.jpg')">
</map>

areaタグの中にonmouseoverとonmouseoutの指示を入れてます。

完成コード

全体的にはこんな感じです。

<img src="/img/01.jpg" alt="" width="400" height="200" usemap="#map" id="map">
<map name="map">
<area shape="circle" coords="200,100,50" href="#" onmouseover="changeMapImage('/img/02.jpg')" onmouseout="changeMapImage('/img/01.jpg')">
</map>
<script type="text/javascript">
//画像の先読み
var imgObj = new Image();
imgObj.src = "img/01.jpg";
//画像の差し替え
function changeMapImage(imgPath) {
	document.getElementById('map').src = imgPath;
}
</script>

ついでにロールオーバーする画像をJavascriptで先読みさせてみました。