レスポンシブ時代のイメージマップ（クリッカブルマップ）

10年ぶりくらいにイメージマップを使用したのでメモ。

あれ、イメージマップってどうやって作るんだっけ…？

昔はDreamweaverとかでポチポチやってた気がしますが、今持ってないしどうしよう…。
と思ったらこんな便利なジェネレータがありました。

HTML Imagemap Generator

画像をアップしてポチポチするだけでこんな感じのHTMLタグを生成してくれます。

html

<img src="xxx.png" usemap="#ImageMap" id="image_map" alt="" />
<map name="ImageMap">
  <area shape="rect" coords="255,2,477,81" href="#" alt="頭部" />
  <area shape="rect" coords="257,84,479,132" href="#" alt="眼" />
  <area shape="rect" coords="260,168,473,239" href="#" alt="首・頸部"  />
  <area shape="rect" coords="261,247,470,365" href="#" alt="胸部" />
  <area shape="rect" coords="264,425,471,553" href="#" alt="腹部" />
  <area shape="rect" coords="15,193,126,304" href="#" alt="手足" />
  <area shape="rect" coords="131,209,258,308" href="#" alt="腕" />
  <area shape="rect" coords="244,561,492,726" href="#" alt="脚" />
</map>

画像を%表示したらどうなるんだろう…。

イメージマップは画像の原寸に対しての座標になるので、画像を拡大／縮小すると、当然ずれます。
それを解決してくれるjQueryのプラグインがありました。

jQuery-rwdImageMaps

まず、cssで画像を100%表示にします。

css

# image_map {
    max-width: 100%;
    width: auto;
}

そして、プラグインのメソッドを実行します。

JavaScript

$('#image_map').rwdImageMaps();

デモ

イメージマップ

注意点

画像が非表示の状態でプラグインのメソッドを実行してもうまくいきませんでした。
使用する際は、画像を表示してからメソッドを実行するようにしましょう。