HTMLタグ/イメージタグ/画像内に複数リンクを指定する

イメージマップ（クリッカブルマップ）を指定するタグです。この指定を行うと、1枚の画像内に複数のリンクボタンを設定できます。

マップサンプル

イメージマップは、画像を読み込むimgタグ、マップを定義するmapタグ、リンク設定を行うareaタグ、この3種類のタグで構成されています。

まず、イメージマップに使用する画像を用意して、それをimgタグで読み込みます。
imgタグに usemap="" を追加して、シャープ（ # ）に続けて任意のマップ名（半角英数字）を指定します。
mapタグに name="" を追加して、2.で使用したマップ名を指定します。（このマップ名により、画像とリンク設定が繋がることになります。）
mapタグに囲まれた部分へ、areaタグを記述します。
areaタグに、shape=""（ボタン領域の形状）、coords=""（ボタン領域の座標）、href=""（リンク先URL）、alt=""（代替テキスト）を追加して、それぞれの設定を行います。
画像内に複数のリンクボタンを設定する場合は、ボタンの数だけareaタグを記述します。

■imgタグ

<img src="image/map.gif" alt="マップサンプル" usemap="#maptest">

src=""	イメージマップに使用する画像のファイル名を指定します
alt=""	代替テキストを記述します
usemap=""	シャープ（ # ）に続けて任意のマップ名（半角英数字）を指定します

※HTML4.01では、alt属性は必須とされています。できるだけ指定しておくようにしましょう。
※imgタグには、border属性やサイズ指定なども指定できます。

■mapタグ

<map name="maptest"> ～ </map>

name=""	imgタグと同じマップ名を指定します

■areaタグ

<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">

shape=""	［ボタン領域の形状を指定します］
	rect … （四角形）
	circle … （円）
	poly … （多角形）
	default … （画像全体）ボタン領域を指定されていないエリア ※defaultの指定は、IEでは対応していないようです。
coords=""	［ボタン領域の座標をピクセル数で指定します］
	rectの場合 … （左上の角と右下の角の座標を指定します）
	circleの場合 … （中心点の座標と半径を指定します）
	polyの場合 … （それぞれの角の座標を指定します）
	defaultの場合 … （coords="" の指定は必要ありません）
href=""	リンク先ページのファイル名を指定します
alt=""	代替テキストを記述します

※HTML4.01では、alt属性は必須とされています。できるだけ指定しておくようにしましょう。
※areaタグには、target属性も指定できます。
※shape="" にdefaultを指定したareaタグは、他のareaタグより後に記述する必要があります。

ボタンの形状により、座標の記述方法は異なります。

座標サンプルイメージマップサンプル

【上記の画像を使用した座標の記述例】

※座標の指定は、カンマ（ , ）で区切って記述していきます。

rect（四角形）の場合 … 左上の角と右下の角の座標を指定します。
coords="22,11,122,62"

circle（円）の場合 … 中心点の座標と半径を指定します。
coords="184,86,30"

poly（多角形）の場合 … それぞれの角の座標を指定します。
coords="87,78,30,110,81,139,69,113"
※次のように、スタート地点を重ねて終了してもOKです。
coords="87,78,30,110,81,139,69,113,87,78"

【座標の割り出し方法】

座標の割り出しは、画像を編集できるソフトがあれば簡単です。Windowsの場合は、ペイントでも座標を調べることができます。

イメージマップで使用する画像をソフトで読み込み、マウスで目的の場所をポイントします。ペイントの場合は下のバーに座標を示す数値が表示されるので、それをメモしておきます。

必要な箇所だけこの作業を繰り返し、ボタン領域の座標を割り出していきます。

▼これをブラウザで見ると次のように表示されます