Edited at

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

More than 3 years have passed since last update.

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タグに画像が表示上の最大幅となる時widthheightを指定することです。

areaタグの座標の作成は「HTML Imagemap Generator」が便利です。

HTML Imagemap Generatorを使用する際は表示上の最大幅の画像を使用してください。

HTML Imagemap Generator

http://labs.d-s-b.jp/ImagemapGenerator/