HTML-クリッカブルマップをレスポンシブ対応する方法

2020年6月23日 2020年6月23日

クリッカブルマップを久しぶりに使おうと思うと、レスポンシブ対応ってどうするの？
そう思うことはないでしょうか。

Web制作をしている方でもクリッカブルマップ自体が滅多に使わない人が多いので、いざ必要な時にわからない場合があると思います。今回はそうした方にむけて、HTMLのクリッカブルマップをレスポンシブ対応する方法を紹介していきます。

クリッカブルマップをレスポンシブ対応する方法

HTMLのクリッカブルマップをレスポンシブ対応する方法ですが、JQueryプラグインを使うと簡単に対応することができます。利用するのはjQuery rwdImageMapsというJQueryプラグインとなります。下記で配布さえれていますので、ダウンロードしてご利用ください。

jQuery rwdImageMapsのダウンロードはこちら

まずはhtmlでクリッカブルマップを適用します。

<img src="sample.jpg" usemap="#sample" alt="サンプル" >
<map name="sample">
<area href="sample01.html" shape="rect" alt="" coords="15,15,40,40">
<area href="sample02.html" shape="circle" alt="" coords="60,60,15">
<area href="sample03.html" shape="poly" alt="" coords="60,60,80,80,70,90">
</map>

ちなみにクリッカブルマップ自体の適用方法を忘れてしまった方は、下記ジェネレーターを使うと簡単にクリッカブルマップを適用したHTMLコードを取得できます。

HTML Imagemap Generator

次に下記コードをhead内に設置します。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>

1行目でJQueryを読み込みます。
他のバージョンでも動作しますが、ご自身で使っているJQueryで動作するかご確認ください。

2行目でjQuery rwdImageMapsを読み込みます。
3行目から7行目をそのまま適用していただければ、クリッカブルマップのレスポンシブが完了です。