2015/10/29
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。
最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。
画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。
jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。
使い方
使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。
HTML
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script> <script> $(function(){ $('img[usemap]').rwdImageMaps(); }); </script>
上のように、jQuery本体とrwdImageMaps.jsを読み込んで、スクリプトを実行。
あとはふつうにimg要素にクリッカブルマップを設定するだけ。あな簡単し。
挙動はデモページをごらんくださいませ。
レスポンシブウェブデザインのサイトを作成時にクリッカブルマップを盛り込まなければいけない事案が発生したらどうぞ。
こんな記事もオススメです
- 私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど)
- 横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
- テキストを均等割り付けしてくれるjQueryプラグイン「jQuery.justify.js」
SPONSORED LINK
FB Comments
次の記事はありません