画像の好きな位置にリンクを仕込むことができるクリッカブルマップ。非常に便利ではあるのですが、レスポンシブのように画像などがデバイスサイズに合わせて可変するサイトでは、マップの座標がずれてリンクの位置が変わってしまいます。
そんなレスポンシブサイトでも、クリッカブルマップを使えるようにしてくれる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>
これだけで、画像のサイズが変わっても、マップの座標位置を維持してくれます。
あとがき
ファイルを読み込むだけでいいから、楽チンですね。試してみた感想としては、リンクの位置が若干ずれることもありましたが、なかなか精度は良いと思います。ずれても誤差の範囲でした。
クリッカブルマップが使われているサイトをレスポンシブ化しなければいけなくなったとか、画像が可変するサイトにクリッカブルマップを使わなければいけない時は、ぜひお試しください。