スタッフのつぶやき

イメージマップによる画像の切り替え

  • このエントリーをはてなブックマークに追加
イメージマップによる画像の切り替え

イメージマップでは、hoverによる画像の切り替えが行えます。

既に多く知られているイメージマップを、改めて自分なりに使ってみました。

※この記事は、「 WebScripter.jp」 様の記事を参考に致しました。

下記サイトは有名な計測ジェネレータですが、ここでイメージマップのリンク範囲を計測します。

https://labs.d-s-b.jp/ImagemapGenerator/

 

ここに使用したい写真や画像を用意し、ドラッグ&ドロップします。

今回は、下の2つの写真を使ってみます。

 

後者は後ほど使うので、まず前者の写真をドラッグ&ドロップし、右上に表示されている、「多角形を描く」のボタンを押します。

 

リンク範囲をライトの傘に指定したいので、ライト部分に領域を作ります。

 

area領域を2つ作りました。

それではソースをコピペします。

 

下がコピペしたソースになります。

<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などと組み合わせれば、様々なバリエーションのイメージマップを作ることができます。

今回は簡易的なイメージマップを作りました。

 

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ