areaタグをレスポンシブ対応させる方法

画像内にイメージマップをつくってリンクをつけることができるareaタグですが、
アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。

areaタグをレスポンシブ対応させる方法

結論

CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。

ジェネレーターでイメージマップを作成後、タグに使うimgに usemap=”#image-map”を書いてrwdImageMaps(); を実行させます。

イメージマップジェネレーター

Free Online Image Map Generator

GitHub URL

GitHub – stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

CDN

jQuery-rwdImageMaps – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers

//ライブラリ読み込み
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
      

//areaタグのレスポンシブ用
$('img[usemap]').rwdImageMaps();