Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 277
content=""/> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 277
content="" /> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 277
content="" />

Web制作 × AI

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

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

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

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

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

解説

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

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

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

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

この記事を書いた人(著者情報)

片山

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

著者画像

スポンサーリンク