LoginSignup
60

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-03-09

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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
60