【css】イメージマップをレスポンシブル化する！【js】

先日しこしこ書いていたバンドのホームページです！
そこでメンバー紹介ページを作った際にメンバーの顔をクリックするとjavascriptのinnerHTMLでメンバーの紹介がページ上部に表示されるっていうコードを書いてみたのですが盲点がありました。

そうなんです。
メンバーの顔の位置をイメージマップを使ってareaで指定したので画像が小さくなるとリンクの位置が変わってしまうのです。僕の顔をクリックしたら可愛い２女のプロフィールが。

これはまずいですよね！
ってことでイメージマップをレスポンシブルにしてみました！

ビバ☆GitHub！便利な物が落ちていた！
参考：http://www.onside.com/ | レスポンシブ Web デザインとイメージマップ（クリッカブル・マップ）

こちらのサイトさんを参考にさせていただきました！
なんとstowball/jQuery-rwdImageMapsにそんな悩みを解決してくれるコードが落ちていたのです。こちらのコードをダウンロードし、wordpressのthemeディレクトリ内のjsディレクトリにぶち込めば終わりです。

後は固定ページ内に

<script type="text/javascript" src="jquery.rwdImageMaps.min.jsのパス"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.jsのパス"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>

を書けばイメージマップがレスポンシブルになります！
画像が小さくなったときリンクを埋め込んだ座標がそれに対応して動いてくれます！