イメージマップでは、hoverによる画像の切り替えが行えます。
既に多く知られているイメージマップを、改めて自分なりに使ってみました。
※この記事は、「 WebScripter.jp」 様の記事を参考に致しました。
下記サイトは有名な計測ジェネレータですが、ここでイメージマップのリンク範囲を計測します。
https://labs.d-s-b.jp/ImagemapGenerator/
ここに使用したい写真や画像を用意し、ドラッグ＆ドロップします。
今回は、下の２つの写真を使ってみます。
後者は後ほど使うので、まず前者の写真をドラッグ＆ドロップし、右上に表示されている、「多角形を描く」のボタンを押します。
リンク範囲をライトの傘に指定したいので、ライト部分に領域を作ります。
area領域を２つ作りました。
それではソースをコピペします。
下がコピペしたソースになります。
<img src=”image.jpg” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”poly” coords=”184,34,177,97,194,97,210,96,227,94,244,93,258,90,239,25,224,22,210,24,196,25,187,28,184,29″ href=”#” alt=”” />
<area shape=”poly” coords=”248,42,239,95,254,97,269,99,287,101,305,104,297,43,280,38,262,39,248,40,249,41″ href=”#” alt=”” />
</map>
ここで気をつけるのが、<img>にidを振ることです。
classではなくidを振ってください。
ではまず<head>内に下のソースを挿入します。
<script type=”text/javascript”>
function changeMapImage(imgPath) {
document.getElementById(‘⚫︎⚫︎⚫︎⚫︎’).src = imgPath;
}
</script>
⚫︎⚫︎⚫︎⚫︎には<img>のidを指定します。
次に、先ほどコピペしたソースに下のソースを加えます。
①には、切り替えたい画像を指定します。
ここで、最初にご紹介した2枚の画像のうちの残りの1枚を指定します。
onmouseover=”changeMapImage(‘①’)”
②には、今表示している画像を指定します。
onmouseout=”changeMapImage(‘②’)”
書き換えると下のようなソースになります。
<script type=”text/javascript”>
function changeMapImage(imgPath) {
document.getElementById(‘img’).src = imgPath;
}
</script> <!– http://www.webantena.net/javascriptjquery/img-map-rollover/ –>
<img id=”img” src=”【今表示している画像】” usemap=”#body_main_div_map” alt=”寝室” /> <!– https://www.photo-ac.com/main/detail/635889?title=ツインベッドルーム%20 –>
<map name=”body_main_div_map”>
<area shape=”poly” coords=”184,34,177,97,194,97,210,96,227,94,244,93,258,90,239,25,224,22,210,24,196,25,187,28,184,29″ href=”#” alt=”ライト左” onmouseover=”changeMapImage(‘【切り替える画像】’)” onmouseout=”changeMapImage(‘【今表示している画像】’)”>
<area shape=”poly” coords=”248,42,239,95,254,97,269,99,287,101,305,104,297,43,280,38,262,39,248,40,249,41″ href=”#” alt=”ライト右” onmouseover=”changeMapImage(‘【切り替える画像】’)” onmouseout=”changeMapImage(‘【今表示している画像】’)”>
</map>
あとは、このソースを挿入するだけです。
完成はこちら。
他のjsなどと組み合わせれば、様々なバリエーションのイメージマップを作ることができます。
今回は簡易的なイメージマップを作りました。
