jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応する方法｜DAD UNION

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応する方法をご紹介します。

Contents

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するCSS記述
jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するHTMLの記述
jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するJavaScriptの記述
jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するデモページ
ソース元：jQuery-rwdImageMaps

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するCSS記述

※mapタグを設定する画像（img[usemap]）のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  font-size: 18px;
  text-align: center;
  line-height: 1.8em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
p{
  padding-bottom: 10px;
}
img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}
</style>

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するHTMLの記述

※mapタグを設定する画像（logo1.jp）を用意します。用意した画像（logo1.jp）内の文字（「D」と「U」）にmapタグ設定し各areaタグのalt属性に文字を設定します。

&lt;h1&gt;jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応します。&lt;/h1&gt;
&lt;p&gt;以下の画像の「D」と「U」文字にmapタグ（クリッカブルマップ）を設定してます。&lt;br&gt;「D」と「U」をクリックすると各altに設定している文字をalertメッセージで表示します。&lt;br&gt;ブラウザ幅を拡大・縮小させてクリックしてみて下さい。&lt;/p&gt;

<img src="logo1.jpg" usemap="#logo" alt="" />
<map name="logo">
  <area shape="rect" coords="131,236,347,506" href="./" alt="「D」をクリックしました。">
  <area shape="rect" coords="401,235,622,512" href="./" alt="「U」をクリックしました。">
</map>

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するJavaScriptの記述

※jquery.min.js（v1.10.2）、jquery.rwdImageMaps.min.jsファイルを読み込みます。$(‘画像エリア’).rwdImageMaps()を記述します。mapタグに設定した各areaタグをクリックするとalt属性に文字をalertメッセージで表示する処理です。

<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
  
  $('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
  });
});
</script>