あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】レスポンシブに対応したクリッカブルマップ

【jQuery】レスポンシブに対応したクリッカブルマップ

今回は特急コーディング時に心強いjQueryプラグインを紹介します。
みなさまは下記のような状況で「クリッカブルマップを使いたいな~」と思った経験はありませんでしょうか?

  • ・レスポンシブ対応のページを作成する時、1枚の画像をPC・スマホで共通に使用したい(フルードイメージ)
  • ・画像の中にリンクがガッツリと入っている
  • ・工数が短く、公開期間も短いLPなのでクリッカブルマップ対応したい

しかし、レスポンシブ対応の案件でクリッカブルマップを通常通り実装してしまうとスマホページ閲覧時やメディアクエリで設定したブレイクポイントを超えた時点でリンクの範囲にズレが生じます。

そんなときは「jquery.rwdImageMaps.js」を使用すればクリッカブルマップの座標がズレなくなります。
jquery.rwdImageMaps.jsはウインドサイズを縮小してもクリッカブルマップの座標を再計算してレスポンシブに対応させてくれるjQueryプラグインとなっています。

解説

まずはデモページを用意しましたので、ウィンドサイズをグリグリ変えても画像のリンクエリアがずれていないことをご確認してください。

このプラグインの優れたところはクリッカブルの記述は通常通り良いところです。
クリッカブルは従来の方法で作成し、scriptに下記の1行を記述するだけで適用されます。

$(function(){
  $('img[usemap]').rwdImageMaps();//これを記述
});
まとめ

代理店案件などで工数が十分に与えられていな時などに役に立つので覚えておいて損はないでしょう。
【注意】
imgタグ内のwidth属性とheight属性に数値を入れないとPC閲覧時にプラグインが効かなくなるようです。