【jQuery】クリッカブルマップをレスポンシブ対応させるjs「jQuery RWD Image Maps」の使い方

クリッカブルマップでマークアップしたいとき、レスポンシブ対応させることができないかと思い調べたら余裕で見つかった。

 

しかも、要素の高さをそろえるjs「tile.js」なみに超絶簡単だったのは笑いがとまらないね！！ハハッ！♪

→【超常用】要素の高さを揃えるtile.jsの使い方（javascript実践）

 

 

jQuery RWD Image Mapsの使い方

まずはjsファイルを下記URLからダウンロードする。

https://github.com/stowball/jQuery-rwdImageMaps

 

容量を少なくしてページ読み込み速度を早くするために「jquery.rwdImageMaps.min.js」の方を使いましょう。

 

そして、お好みのjsファイルに

 

$(function(){

　$(‘img[usemap]’).rwdImageMaps();

});

 

と書いて読み込めば完成。

 

「【超常用】要素の高さを揃えるtile.jsの使い方（javascript実践）」のtile.jsの場合はセレクタを指定しなければいけないが、jQuery RWD Image Mapsはその必要はない。 実に簡単なjsである。。。

 

 

まとめ

まとめもくそもないが（笑）、クリッカブルマップを使ってマークアップした際には「jQuery RWD Image Maps」が超絶役に立ちます。

 

最近ではレスポンシブ対応のサイトがほとんど（全てといっても過言ではないかも…）なのでレスポンシブ化することは前提としてクリッカブルマップをレスポンシブ化できるのはありがたい。

 

 

駆け出しのwebデザイナー、webコーダーにとってこの記事が少しでも力になれたのなら幸いです。 それでは、今回はこの辺で。。。