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

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

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

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

解説

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

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

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

まとめ

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

この記事を書いた人（著者情報）

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。