イメージマップのレスポンシブ対応がうまくいかない

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

■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>

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