こんにちは。
今回はイメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」!です。
レスポンシブサイトにイメージマップを使う機会があり、jQueryプラグイン「RWD Image Maps」を使うと簡単にレスポンシブ対応にさせる事ができたので紹介します。
イメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」!
RWD Image Maps
「RWD Image Maps」をダウンロードしてみよう!
https://github.com/stowball/jQuery-rwdImageMapsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「RWD Image Maps」の使い方
jQuery本体とjquery.rwdImageMaps.min.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 | <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script> |
html部分を記述します。
html部分はいつも通り普通にコーディングして大丈夫です。
1 2 3 4 | <img src="img/sample.png" alt="" usemap="#map"> <map name="map"> <area shape="rect" coords="796,195,1177,395" href="#" alt="サンプル"> </map> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
これはすごく便利ですね。
イメージマップをレスポンシブ対応させる場合は是非!
以上でイメージマップをレスポンシブ対応にできるjQueryプラグイン「RWD Image Maps」!でした。