jQueryのプラグイン「RWD Image Maps」でイメージマップリンクをレスポンシブ対応させる

jQueryプラグイン「RWD Image Maps」を利用すれば、簡単にイメージマップリンクをレスポンシブ対応させることができます。

例えば、以下のように100×100のサイズの画像「sample.jpg」に対してイメージマップを用意します。

<img src="sample.jpg" usemap="#sample" alt="サンプル" >
<map name="sample">
<area href="sample1.html" shape="rect" alt="四角形のリンク" coords="10,10,30,30">
<area href="sample2.html" shape="circle" alt="円形のリンク" coords="50,50,10">
<area href="sample3.html" shape="poly" alt="多角形のリンク" coords="60,60,80,80,70,90">
</map>

画像に対して、四角形のリンク、円形のリンク、多角形のリンクの3つのエリアを設定しています。
通常だと、これをレスポンシブ対応のサイトに設置し、画面の大きさに応じて画像サイズを拡縮した場合、イメージマップのリンクエリアがズレてしまいます。

このような場合に、以下のプラグインを導入することで、簡単にイメージマップをレスポンシブ対応することができます。

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

導入方法は簡単です。
jQueryを読み込んだ後に、上記のGitHubからダウンロードしたプラグインを読み込みます。

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

次にusemap属性を持っている要素に対して、プラグインを実行します。

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

これだけで完了です。

以下の公式サンプルを見てもらうと分かるように、非常に複雑なマップでも対応可能です。
ブラウザのサイズを変更してみて、クリッカブルエリアがフレキシブルになっていることを確認してみましょう。

Responsive Image Maps jQuery Plugin

ちなみに、マップの座標の指定方法ですが、画像のオリジナルサイズに対して座標を指定すればよいです。