レスポンシブなイメージマップの作成

1枚の画像に複数のリンクを付けるイメージマップですが、htmlとcssだけではレスポンシブに対応できないので「jQuery RWD Image Maps」というプラグインを使用します。

jQuery RWD Image Maps
https://github.com/stowball/jQuery-rwdImageMaps

###実装サンプル

<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>

html

<img src="img.png" width="800" height="115" usemap="#ImageMap">
<map name="ImageMap">
    <area shape="rect" coords="200,0,500,110" href="#" alt="" />
</map>

css

img[usemap] {
    max-width: 100%;
    height: auto;
}

js

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
})

注意点はimgタグに画像が表示上の最大幅となる時のwidthとheightを指定することです。

areaタグの座標の作成は「HTML Imagemap Generator」が便利です。
HTML Imagemap Generatorを使用する際は表示上の最大幅の画像を使用してください。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/