イメージマップ（クリッカブルマップ）は画像の一部分をリンク設定できる機能です。
昔からある機能でFireworksやDreamweaverでは簡単に作成することができます。
久々にこのイメージマップを使う機会があったので改めて勉強してみました。
DreamweaverやIllustratorでレスポンシブなイメージマップを作成するなら以下の記事が参考になります。
-
-
Dreamweaver,Illustrator レスポンシブなイメージマップを作成する方法
ウェブページで画像やイラストの一部をクリックすると新しいページが開くというのはイメージマップで実現できます。 クリッカブルマップとも言われます。 最近はあまり使わなくなっていますが地図からのリンクを作 ...
続きを見る
イメージマップ（クリッカブルマップ）の構成
イメージマップ（クリッカブルマップ）の構成はimg要素、map要素,area要素 の三つだけです。
img要素は、通常の画像を表示するのと同様で
<img src="images/imagemap.png">
これに、イメージマップ属性を追加します。
<img src="images/imagemap.png" usemap="#Map">
usemap=""
イメージマップの名前を指定,
複数イメージマップがある場合は重複しない名前、
アンカーのように「#」をつけます。
この後、画像のどの部分にイメージマップ（リンク）を付けるかを指定します。
<map name="Map">
<area shape="rect" coords="101,234,147,277" href="#" target="_blank" alt="" />
<area shape="rect" coords="19,240,65,285" href="#" target="_blank" alt="" />
<area shape="rect" coords="305,103,354,140" href="#" target="_blank" alt="" />
</map>
map要素にはイメージマップの名前を指定
img要素に指定した名前です
area要素は、どの部分にリンクするかの形状や座標、リンク先を指定
<area shape="形状" coords="座標" href="リンク先" alt="代替文字">
shape
リンクの形を指定できます。
- rect 四角形
- poly 多角形
- circle 円
■リンクの形が四角の場合[rect]
<area shape="rect" coords="101,234,147,277" href="#" target="_blank" alt="" />
shape = "rect"
coords="101,234,147,277"
左上の座標XY（101,234）と右下の座標XY（147,277）を指定します
■リンクの形が多角形の場合[poly]
<area shape="poly" coords="79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157" href="#">
shape = "poly"
coords = "79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157"
すべての点の座標XY指定します。
上記の場合は、八角形のリンクになります。
■リンクの形が円形の場合[circle]
<area shape="circle" coords="187,58,27" href="#">
shape = "circle"
coords="187,58,27"
円の中心の座標XY（187,58）と半径（27px）を指定します
画像の座標を調べるのが面倒な場合は、ジェネレータでソースを生成！
いまどきは便利なものを作ってくれる人がいて本当にありがたいです。
Imagemap が作成できるジェネレーター
日本人の方が作られているので日本語です。
HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/
海外製のイメージマップジェネレータです
HTML Map Creator
http://www.html-map.com/
