イメージマップ【image map】クリッカブルマップ / clickable map

概要

イメージマップ（image map）とは、Webページにリンクを配置する方式の一つで、一枚の画像の中で指定した領域ごとに異なるリンク先を設定できるもの。Webブラウザ側で処理する方式とWebサーバ側で処理する方式がある。

クライアントサイドイメージマップ

Webブラウザ側でリンク先を振り分ける方式で、単にイメージマップという場合はこの方式を指す。画像内に様々な形状の領域を設定し、それぞれに別のリンク先を設定することができる。

マップを設定するimg要素にはusemap属性でマップ名を指定する。マップの定義はmap要素で行い、img要素で指定したマップ名をname属性に記述する。map要素は子要素として画像内の領域を定義するarea要素を複数持つことができる。

area要素は領域の形状を指定するshape 属性、頂点などの座標を指定するcoords属性、リンク先を指定するhref属性、代替テキストを指定するalt属性から成る。shape 属性は「rect」（四角形）、「poly」（任意形状の多角形）、「circle」（円）、「default」（どの領域にも含まれていない外側）を指定できる。

例えば、<area shape="rect" coords="0,0,50,50" href="square.html"> のように指定すると、画像の左上端を原点として（0,0）と（50,50）を対角線とする四角形（この場合は50ピクセル四方の正方形）の領域から「square.html」へリンクする。