クリッカブルマップをレスポンシブ対応する方法

レスポンシブデザインへの改修依頼を受けた際に、クリッカブルマップを使用したページをレスポンシブ対応する方法を調べたので備忘録として残しておきます。

レスポンシブで画像サイズを画面に合わせて変更すると、クリッカブルマップで設定したエリアがズレてしまいます。

クリッカブルマップも可変にするために、jQueryプラグイン「jQuery-rwdImageMaps」を使用します。

jQuery-rwdImageMapsの使い方

まずは必要なjsファイルを下記サイトからダウンロードします。

ページ内にjQueryとダウンロードしたファイルを読込みます。

<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>

続いて実行コードを記述します。

<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
</script>

これで画像サイズに合わせてクリッカブルマップが自動でサイズ変更されるようになりました。

クリッカブルマップは画像の原寸大に対して設定されている必要があります。
画像要素のwidth、heightやcssの%などのサイズ設定も削除した状態で
クリッカブルマップが設定出来たら、デザインに合わせた画像のサイズを設定します。

実際に使用した感じは下記デモページから確認できます。
Responsive Image Maps jQuery Plugin