レスポンシブ対応のクリッカブルマップの作り方

クリッカブルマップの作り方

ジェネレーターを使う

自分で座標軸を探して記述もできますが、ジェネレーターを使うのが手っ取り早いです。

HTML Imagemap Generator

矩形を描く

円形を描く

多角形を描く

生成されたHTMLをコピペする。

  <img src="1.jpg" usemap="#ImageMap" alt="" />
  <map name="ImageMap">
    <area shape="rect" coords="35,180,232,307" href="#" alt="" />
    <area shape="circle" coords="425,245,78" href="#" alt="" />
    <area shape="poly" coords="670,166,597,251,634,248,634,332,704,332,706,252,743,248,670,168,667,166" href="#" alt="" />
  </map>

レスポンシブに対応させる

このままでは横幅が変わり、画像サイズも変わると、クリックできる場所が移動してしまいます。。

jQuery RWD Image Mapsでレスポンシブに対応

jQuery RWD Image Maps

  <script src="jquery-3.5.1.min.js"></script>
  <script src="jquery.rwdImageMaps.min.js"></script>
  <script>
  $(document).ready(function(e) {
      $('img[usemap]').rwdImageMaps();
  });
  </script>

これでどのデバイスで見てもリンクがずれることはありません。

完成