イメージマップ(クリッカブルマップ)の作り方とまとめ

イメージマップ(クリッカブルマップ)は画像の一部分をリンク設定できます。
昔からある機能ですが、私の場合、FireworksやDreamweaverでしか設定したことがなかったので仕組みがよくわかっていませんでした。

このたび久々にこのイメージマップを使う機会があったので改めて勉強してみました。

イメージマップ(クリッカブルマップ)の構成

イメージマップ(クリッカブルマップ)の構成はimg要素、map要素,area要素 の三つだけです。

img要素は、通常の画像を表示するのと同様で
<img src=”images/imagemap.png”>
これに、イメージマップ属性を追加します。

<img src=”images/imagemap.png” usemap=”#Map”>

usemap=””
イメージマップの名前を指定,
複数イメージマップがある場合は重複しない名前、
アンカーのように「#」をつけます。

この後、画像のどの部分にイメージマップ(リンク)を付けるかを指定します。

map要素にはイメージマップの名前を指定

img要素に指定した名前です

area要素は、どの部分にリンクするかの形状や座標、リンク先を指定

■shape

リンクの形を指定できます。
rect    四角形
poly  多角形
circle 円

■リンクの形が四角の場合[rect]

shape = “rect”

coords=”101,234,147,277″

左上の座標XY(101,234)と右下の座標XY(147,277)を指定します

■リンクの形が多角形の場合[poly]

 

shape = “poly”

coords = “79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157”

すべての点の座標XY指定します。
上記の場合は、八角形のリンクになります。

■リンクの形が円形の場合[circle]

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/

SNSでもご購読できます。