レスポンシブサイトでもクリッカブルマップが使えるようになるjQueryプラグイン「jQuery RWD Image Maps」

レスポンシブサイトでもクリッカブルマップが使えるようになるjQueryプラグイン「jQuery RWD Image Maps」

レスポンシブサイトでもクリッカブルマップが使えるようになるjQueryプラグイン「jQuery RWD Image Maps」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

画像の好きな位置にリンクを仕込むことができるクリッカブルマップ。非常に便利ではあるのですが、レスポンシブのように画像などがデバイスサイズに合わせて可変するサイトでは、マップの座標がずれてリンクの位置が変わってしまいます。

そんなレスポンシブサイトでも、クリッカブルマップを使えるようにしてくれるjQueryプラグインが「jQuery RWD Image Maps」です。以下にデモも用意されています。

デモページを見る

jQueryとファイルを読み込むだけでOKなので、非常に簡単に実装できます。

スポンサードリンク

jQuery RWD Image Mapsの使い方

まずはGitHubからファイルをダウンロードします。ダウンロードしたZIPファイルを解凍し、jquery.rwdImageMaps.min.jsをサーバー上に設置します。

ファイルを設置したら、以下のコードを</body>の直前などに記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
<script>
$(function(){
$('img[usemap]').rwdImageMaps();
});
</script>

これだけで、画像のサイズが変わっても、マップの座標位置を維持してくれます。

あとがき

ファイルを読み込むだけでいいから、楽チンですね。試してみた感想としては、リンクの位置が若干ずれることもありましたが、なかなか精度は良いと思います。ずれても誤差の範囲でした。

クリッカブルマップが使われているサイトをレスポンシブ化しなければいけなくなったとか、画像が可変するサイトにクリッカブルマップを使わなければいけない時は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。