イメージマップ、今はあまり使わないかもしれないけど＋レスポンシブ対応を追加

記事公開日：2017.11.22 （最終更新日：2017.11.24）

ホームページ制作を始めた10年前くらいに何度か使っていた「イメージマップ」機能。
画像やイラストの上にリンクが貼れる便利な機能です。

ここに来て、イラストレータで作成したイラストにリンクを貼るご希望があり久々に使っています。
バナーにリンクを張る場合でも、マウスオーバーの時は何かしらの動きがある昨今。
イラストにリンクを張っても、なにも動作がないとなかなかリンクとわかりづらいのが気がかりなのでこちらのjavasvriptです。

javascriptでマウスオーバー時に画像を変えることができます。

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

1

2

3

4

5

function changeMapImage(imgPath) {

document.getElementById('map').src = imgPath;

}

</script>

html

<p class="parts_center ph-size">
<img src="img/pro-type-img1.gif" alt="" usemap="#mapMap" id="map" />
<map name="mapMap">
  <area onmouseover="changeMapImage('img/pro-type-img1S.gif')" onmouseout="changeMapImage('img/pro-type-img1.gif')" shape="rect" coords="7,437,254,601" href="#s-type">
  <area onmouseover="changeMapImage('img/pro-type-img1T.gif')" onmouseout="changeMapImage('img/pro-type-img1.gif')"  shape="rect" coords="296,439,543,599" href="#t-type">
  <area onmouseover="changeMapImage('img/pro-type-img1D.gif')" onmouseout="changeMapImage('img/pro-type-img1.gif')"   shape="rect" coords="584,437,827,600" href="#d-type">
</map>
</p>

1

2

3

4

5

6

7

8

</map>

</p>

これならイラストにリンクが張ってあるのがわかるので安心です。

今回参考にさせていただいたサイトです
イメージマップでロールオーバー時の画像を変更する方法（javascript使用）

イメージマップレスポンシブにしたい場合に追加するjavascript

イメージマップを作成していて、ふと「レスポンシブにする必要がある」ことに気がつきました（おそい！）
そのままではリンクと画像がズレズレですよ（とほほ）

レスポンシブにするにはjavascriptが必要になります。
マウスオーバーの時のhtmlはそのままで、javascriptを追加するだけでオッケーなので楽々です。

<!--イメージマップのレスポンシブ-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
<script>
      $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
      });
</script>

1

2

3

4

5

6

7

8

$(document).ready(function(e) {

$('img[usemap]').rwdImageMaps();

});

</script>

作業自体はとても簡単なのですが、他のjavascriptとぶつかってしまって、その箇所を探し出すのに半日以上費やしてしまいました。。。

今回参考にさせていただいたサイトです
レスポンシブデザインでクリッカブルマップ（イメージマップ）対応にするjQueryプラグイン

« 横に並んだコンテンツの高さを同じにしたい時のCSS | ホームページ制作で重要なブレイクポイント »

長野県長野市のホームページ制作・チラシ・パンフレット・ドローン空撮・スマートフォンサイト制作

新着情報

イメージマップ、今はあまり使わないかもしれないけど＋レスポンシブ対応を追加

イメージマップレスポンシブにしたい場合に追加するjavascript

こちらの記事もオススメです

新着情報一覧

ホームページ制作にまつわる便利な情報を長野より発信！

MW WP FormのフォームでGmailだけメールが届かない！

ページリターンをfooterまでいったらふわっと消したい

hoverで矢印が伸びるアニメーション

プラグイン無しでsns連携させる

wordpressでアップロードした画像が表示されない

タイルレイアウト

アメーバブログRSSをホームページ一覧で表示で文字化けする

cssだけで画像のズームアップ