マップタグをレスポンシブのサイトにも適応させる方法

1枚の画像に複数のリンクを付けるマップタグはhtmlとcssだけではレスポンシブに対応できません。
そこで「jQuery RWD Image Maps」プラグインを使用します。

ダウンロード先
jQuery RWD Image Maps
https://github.com/stowball/jQuery-rwdImageMaps

使用方法

まずjQuery RWD Image Mapsを読み込みます。

Html
<img src="img.png" width="800" height="115" usemap="#ImageMap">
<map name="ImageMap">
<area shape="rect" coords="200,0,500,110" href="#" alt="" />
</map>

css
img[usemap] {
max-width: 100%;
height: auto;
}

js
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
})

参考サイト：
https://qiita.com/tknakatsu/items/a37b0cb9939f9f6458e6

マップタグの作成には以下のサイト「HTML Imagemap Generator」が便利です。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/