クリッカプルマップをjQueryでレスポンシブ対応させる方法

この記事は約 2 分で読めます。

滅多に使わないのですが、たま～に「クリッカプルマップ」を使用してコーディングをする事があります。
しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リンク位置がズレてしまう現象がおきます。

レスポンシブサイトで使用する場合は、「stowball/jQuery-rwdImageMaps」を使用すると、リンクズレが簡単に解決できたのでメモします。

「stowball/jQuery-rwdImageMaps」設定方法

「stowball/jQuery-rwdImageMaps」のページからファイル一式ダウンロードします。

使用するjsは、「jquery.rwdImageMaps.js」か「jquery.rwdImageMaps.min.js」のどちらかとなります。

デモページ

デモが以下のサイトにありました。
完成イメージの確認にもご覧ください。

https://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

設定方法

まずはhtmlでクリッカプルマップのコーディングしておきます。

//クリッカプルマップコーディング例(HTML)
<img src="画像のパス" alt="" usemap="#任意の名前" width="xxx" height="xxx" />

<map name="任意の名前"> 
<area alt="" coords="開始座標位置X,開始座標位置Y,終了座標位置X,終了座標位置Y" shape="rect" href="リンク先URL" />

<area alt="" coords="開始座標位置X,開始座標位置Y,終了座標位置X,終了座標位置Y" shape="rect" href="リンク先URL" />
 </map>

//クリッカプルマップコーディング例(HTML)

</map>

あとはjsを読み込ませます。

//js実装例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
<script><br />
      $(document).ready(function(e) {<br />
        $('img[usemap]').rwdImageMaps();<br />
      });<br />
</script>

//js実装例