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/
