<area>タグ

<area>タグは<map>によって定義されたイメージマップの画像を領域に分け、分けた領域の画像にリンク先を定義します。

shape

shape属性を指定すると、イメージマップの画像を領域に分ける際の形を指定することができます。指定できる値は、

• circ（円形）
• poly（多角形）
• rect（長方形）

です。

このshape属性を指定しない場合はデフォルト値（初期値）が指定されているとみなされ、画像全体を領域とします。結果として、長方形（rect）の領域を指定していることになります。ただし、coords属性によってrectの形式で（値を4つ記述する）指定しなければ、領域として定義されないようです。

coords

coords属性はリンクを指定する画像の領域の場所と大きさを指定します。値はxとy座標の形式で指定し、shape属性で指定された形によって、指定方法も異なります。

画像の座標は、左上がx軸, y軸の順で、 (0, 0)になります。指定された数値はピクセル数になります。

指定した領域が別に指定した領域と重なる場合は、先に指定した領域が適用されます。また、指定した領域が画像そのものの領域を超えてしまう場合、超えてしまった領域は無視されます。

circ（円形）の場合

shape属性にcircが指定されていた場合、中心の座標と半径の長さを指定します。

この場合、xとyが円の中心の座標を表し、rが半径を表しています。

poly（多角形）の場合

polyが指定されていた場合、xとyの座標のセットが多角形のそれぞれの頂点を表します。例えば、三角形を指定するのなら、xとyの値のセットを3セット記述します。

指定するのは多角形で、最初に指定した頂点と、最後に指定した頂点が結ばれることは明らかなので、最初に指定した頂点を最後にもう一度指定する必要はありません。

この場合、6つの頂点を指定し、6角形を定義しています。

rect（四角形）の場合

rectの場合は、xとyの座標のセットを2セット記述し、最初のセットが四角形の左上の頂点を表し、次のセットが右下の頂点を表します。

shape属性を指定しなかった場合、この方法で領域を指定します。

href

href属性には、定義された領域がクリックされたときのリンク先を指定します。値にはリンク先のパスを記述します。パスは相対パスでも、絶対パスでも構いません。

nohref

nohref属性はイメージマップの中で、<area>タグは定義するが、リンク先を設定しない場合に記述しておきます。値にはnohrefを指定します（「nohref="nohref"」と記述します）。

alt

<img>タグのalt属性を同じように、画像の代わりに表示されるテキストを指定します。ただし、<img>タグでは画像全体にわたって代わりのテキストを指定しますが、<area>タグでのalt属性の指定は、定義された領域に対して代わりとなるテキストを指定します。

<area>の使用例

<area>タグを使用して様々な領域を定義した例です。リンクはせず、nohref属性を記述しています。確認ページで確認できるようにtitle属性を付け加えていますので、画像の上にマウスポインタを重ねたりして確認してみてください。

area.html

<map>

ページの先頭

<table>