0

既存サイトで固定横幅で正常なイメージマップをレスポンシブ対応しようとしているのですが、以下のようにやってもブラウザの横幅を変えた時にイメージマップの縮小に対応してリンクエリアが追従されません。(以下書き直します)

■script部分
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.js"></script> <script>
      $(document).ready(function(e) {
        $('img[ImageMap]').rwdImageMaps();
      });
</script>
■イメージマップ部分
<img src="https://example.com/maptest.jpg" usemap="#ImageMap" alt="" />
<map id="ImageMap" name="ImageMap">
  <area shape="rect" coords="185,13,331,55" href="#" alt="" />
  <area shape="rect" coords="14,84,336,237" href="#" alt="" />
  <area shape="rect" coords="366,25,474,100" href="#" alt="" />
  <area shape="rect" coords="491,120,713,235" href="#" alt="" />
</map>

3日ほどトライしていますが、糸口がつかめません。何が違うのでしょうか? アドバイスいただければ幸いです。

【追記】http://web-pc.net/jquery009 を参考にさせていただいて、以下のようにstyleを付けて作り直した所、何故かIE11(Win8.1)だけで動きました。ChromeやFirefoxではiQueryが動作しません(全部、Win8.1で確認)。また、iosのsafariでも動きません。

<style>
div {
    width: 100%;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
<img src="https://example.com/maptest.jpg" width="727" height="250" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="rect" coords="185,13,331,55" href="" alt="" />
  <area shape="rect" coords="14,84,336,237" href="" alt="" />
  <area shape="rect" coords="366,25,474,100" href="" alt="" />
  <area shape="rect" coords="491,120,713,235" href="" alt="" />
</map>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://example.com/js/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
</script>

メインブラウザで動かなくてはどうしようもないので、もう少しがんばってみますが、何か解決策がありましたら、アドバイスいただければ幸いです。

5
  • 現状では問題を再現することが出来ません。現象を再現出来る最小限のコードを追記していただけませんか?
    – supa
    Commented 2019年8月17日 23:05
  • 最初の投稿を書き直しました。よろしくお願いいたします。
    – makapapa
    Commented 2019年8月18日 1:21
  • 何故かIE11でだけ成功したので追記致しました。
    – makapapa
    Commented 2019年8月18日 11:17
  • <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/…> のhttp→https にしたらChrome/Firefoxで成功しました。お騒がせしました。
    – makapapa
    Commented 2019年8月19日 10:36
  • 解決した場合にはぜひ個別の「回答」として投稿してみてください。(スタック・オーバーフローでは自己回答も歓迎です)
    – cubick
    Commented 2019年8月20日 4:30

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。