レスポンシブに対応した画像内リンク (イメージマップ) のやり方

備忘録として。

イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されている。

<ポイント>
・map要素の座標指定は画像の左上が(0,0)で基準となる

<img src="hoge/img1.png" height="193" width="560" alt="hogehoge" usemap="#button">

<map name="button">
  <area shape="rect" coords="0,84,800,250" href="http://www.testhomepage.html" alt="testhomepage" target="_blank" >
     </map>

又、レスポンシブ対応させる場合は
jquery.rwdImageMaps.js を使用すると簡単にできる。

その際iPhoneのchromeでリンクが効かなくなる対応として、

<img src="hoge/img1.png" height="193" width="560"

のように横・縦幅を必ず指定する。CSSで指定したところ
ダメだったので必ずHTMLファイル上で指定しましょう。