HOME > 制作 > Javascript > イメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」！

イメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」！

2015/12/20

こんにちは。
今回はイメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」！です。

レスポンシブサイトにイメージマップを使う機会があり、jQueryプラグイン「RWD Image Maps」を使うと簡単にレスポンシブ対応にさせる事ができたので紹介します。

rwd-image-maps

https://github.com/stowball/jQuery-rwdImageMapsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

jQuery本体とjquery.rwdImageMaps.min.jsを/bodyの手前に読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>

1 2	<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>

その下に下記のスクリプトを記述します。

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

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

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

});

</script>

html部分を記述します。
html部分はいつも通り普通にコーディングして大丈夫です。

<img src="img/sample.png" alt="" usemap="#map">
<map name="map">
	<area shape="rect" coords="796,195,1177,395" href="#" alt="サンプル">
</map>

</map>

いかがでしたか。これはすごく便利ですね。
イメージマップをレスポンシブ対応させる場合は是非！
以上でイメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」！でした。