イメージマップのレスポンシブ設定

Question

sp、タブレット、PCと3種類の画像をブレイクポイントで切り替え、座標を指定してjQuery RWD Image Mapsでレスポンシブ対応させたのですが
PC版でしかうまくいきません。
タブレット版はリンク領域もなく、SP版はまったく違うところにリンク領域がでてしまってる状態です。
こちらsp、タブレット、PCと指定した座標でリンク領域を設定したいです。

  <map name="mageMap" class="Mainmap">
      <picture>
          <source media="( max-width:600px) " srcset="images/hedmain_sp.png" alt="" />       
          <area shape="rect" coords="261,357,641,554" href="#ccc" alt="" />

          <source media="(min-width:600px) and (max-width:1280px) " srcset="images/hedmain_tab.png">
            <area shape="rect" coords="586,432,1193,519" href="#bbb" alt="" />     
          
          <img src="images/hedmain.png" usemap="#mageMap" >
          <area shape="rect" coords="976,80,1208,288" href="#aaa" alt="" />

        </picture>
      </map>

Comments

[m.ts10806]

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

jQuery RWD Image Maps が picture要素に対応していないため、そもそも使えないと思います。
rect指定なら、map要素を使わずに画像の上にa要素を重ねてしまえばよいと思います。（位置は%で合わせればなんとかできます）

Comments

[kawakami_kk]

ありがとうございました