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

MARKLEAPS

2020.05.20

rwdImageMaps
レスポンシブ対応のサイトでは、ウィンドウの大きさに合わせて画像の横幅が変わるため
クリッカブルマップの座標がずれてしまいます。

そこで、クリッカブルマップをレスポンシブ対応させる為のjQuery「jquery.rwdImageMaps.min.js」
についてご紹介します。

デモはこちら

ダウンロード

GitHub よりダウンロードします。
https://github.com/stowball/jQuery-rwdImageMaps

読み込み

jQuery本体とjquery.rwdImageMaps.min.jsを読み込み、
usemap属性を持っている要素に対してスクリプトを実行。

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

$(document).ready(function(e) {

$('img[usemap]').rwdImageMaps();

});

</script>

クリッカブルマップの用意

クリッカブルマップを通常通り記述します。

<img src="img_map01.jpg" usemap="#usemap" alt="" />
<map name="area_map">
<area shape="rect" coords="4,32,211,248" href="#" alt="">
<area shape="rect" coords="407,79,613,279" href="#" alt="">
</map>