【jQuery RWD Image Maps】レスポンシブサイトでイメージマップ(クリッカブルマップ)を使えるjQueryプラグイン

2016.07.18

クリッカブルマップをレスポンシブサイトで使用したい

イメージ画像
昔からあるイメージマップ(クリッカブルマップ)を、
レスポンシブサイトで使用したい時があります。
ただレスポンシブサイトなので、
通常通りusemapなにがしと記述しても、
特定の横幅サイズの時だけしか正確な位置でイメージマップを使用することができません。

そんな時に便利なのが、
jQuery RWD Image Mapsです。

使い方は、
jQuery RWD Image MapsのGitHubから
jquery.rwdImageMaps.jsかjquery.rwdImageMaps.min.jsをダウンロードします。
そしてjQuery本体と一緒に読み込みます。
HTML:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.rwdImageMaps.js"></script>
jQuery本体とjQuery RWD Image Mapsの読み込みができたら、
JavaScript:
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
という感じでイメージマップを使用する画像を指定します。

あとは通常通りイメージマップ(クリッカブルマップ)を指定する記述をHTMLにするだけ!
HTML:
<img src="map.jpg" alt="イメージマップ" usemap="#sample">

<map name="sample">
<area shape="rect" coords="0,0,100,100" href="test.html" alt="リンク">
…
</map>
サーバー上でデモサイトをとりあえず見たいとか即席でモックを作るとか、
使用する際は限定的になるかもしれませんが、
かゆいところに手が届く的にいざというときに便利なので助かります。
← 【PHP基礎】PHPのfor命令を使って九九の表を出力する
【jQuery / CSS】擬似クラスのfirst-childの使い方 →