

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

[code]

    ■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>
    
[/code]

[code]

    ■イメージマップ部分
    <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>
    
[/code]

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

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

[code]

    <style>
    div {
        width: 100%;
    }
    img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
    }
    </style>
    
[/code]

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2019-08-17T22:16:14.847
57419
2019-08-18T11:16:05.580
2019-08-18T11:16:05.580
34954
34954
question
html jquery css jsp
イメージマップのレスポンシブ対応がうまくいかない