jQuery レスポンシブサイトでもクリッカブルマップを対応させるプラグイン「jQuery-rwdImageMaps」を紹介

464

レスポンシブのサイトを作ったはいいけど、スマホやタブレットだと画像のサイズが変わってしまってクリッカブルマップの座標がズレてしまうということがあります。
この際にリサイズされた画像のパーセンテージを自動で計算して座標ポインタを振り直してくれるjQueryのプラグイン「jQuery-rwdImageMaps」をご紹介します。

実際の挙動はこちらで確認できます。
DEMO

読み込むファイルは、まず基本の「jquery.js」とそして「jquery.rwdImageMaps.min.js」ファイルです。

「jquery.rwdImageMaps.min.js」ファイルはstowballさんがGitHubで公開されています。
GitHub

使い方は、とっても簡単でクリッカブルマップをおいてあるページに上述したファイル(２つ)を読み込ませて以下スクリプトを書くだけでOKです。

<script type="text/javascript">
<!--
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
    // もし特定のクリッカブルマップだけを対象にしたい場合は、「'img[usemap]'」の部分の指定を変えればOKです。
});
//-->
</script>