レスポンシブ対応のウェブサイトでは、各デバイス毎のウィンドウの大きさに合わせて画像の横幅が変わるため、クリッカブルマップの座標がズレるという不具合が発生してしまします。
このとき、各クリッカブルマップの座標を再計算してレスポンシブに対応させるjQueryプラグインが［jQuery RWD Image Maps］です。

制作者様のサイトにデモが用意されています。ウィンドウの大きさを拡大縮小させて、どのように挙動するのかご確認ください。

jQuery RWD Image Maps – DEMO : http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

使い方は「jquery.js」と当スクリプト「jquery.rwdImageMaps.js」を読み込むだけなので簡単です。

［jQuery RWD Image Maps］の使い方

まずは必要なファイルをダウンロードしてきましょう。

「jquery.rwdImageMaps.js」はGitHubからダウンロード可能です。

jQuery RWD Image Maps : https://github.com/stowball/jQuery-rwdImageMaps

ダウンロードした圧縮ファイルを解凍すると「jquery.rwdImageMaps.js」と「jquery.rwdImageMaps.min.js」が入っています。

どちらも中身は同じですが「min」と付くほうは余分な改行やスペースなどが削除されて容量が軽くなっています。実際に使うのは「min」付きのタイプにしましょう。

また今回「jquery.js」はGoogleのCDNで配信されているものを利用。
記述するコードは次のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(function(){
	$('img[usemap]').rwdImageMaps();
});
</script>

上記コード内の「img[usemap]」の箇所で［RWD Image Maps］を適用する画像を指定します。
「img[usemap]」と書けば「usemap」属性が付与されたすべての画像が対象になります。

実際に使用している［jQuery RWD Image Maps］を使用しているデモとファイルのダウンロードは以下よりどうぞ。

jQuery RWD Image Maps : http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html