<area> …… イメージマップのハイパーリンク領域を設定する

<area>タグは、イメージマップのハイパーリンク領域を設定する際に使用します。 <area>は<map>～</map>の中に配置します。

href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性を指定する場合には、alt属性が必須となります。 alt属性にはハイパーリンクのテキストを指定します。 反対に、href属性を指定しない場合には、alt属性も省略しなくてはなりません。

尚、href属性を指定しない<area>は、その領域からリンクを外すという意味を持ちます。 他のhref属性を指定した<area>と組み合わせることで、 例えば、円形から三角形を切り抜くなど、より複雑な形状のハイパーリンク領域を指定することが可能となります。

ハイパーリンク領域の形状は、shape属性で指定します。 指定できる形状は、円形・多角形・四角形のいずれかで、circle・default・poly・rectなどのキーワードで指定します。 shape属性を省略した場合には、ハイパーリンク領域の形状は四角形となります。

• circle …… 円形（正円のみ指定可能、楕円は指定できない）
• default …… 初期状態（画像全体がハイパーリンク領域となる）
• poly …… 多角形
• rect …… 四角形

coords属性は、ハイパーリンク領域の座標を指定する際に使用します。 座標は、半角カンマ（ , ）区切りの整数のリストで指定します。

shape属性でcircleなどのキーワードで円形を指定している場合には、coords属性の値は３つの整数のリストとなります。 １つ目の整数は画像の左端から円の中心までのピクセル距離、 ２つ目の整数は画像の上端から円の中心までのピクセル距離、 ３つ目の整数は円の半径のピクセル距離となります。

shape属性でdefaultのキーワードで初期状態を指定している場合には、coords属性は指定できません。 この場合、画像全体がハイパーリンク領域となります。

shape属性でpolyなどのキーワードで多角形を指定している場合には、coords属性の値は少なくとも６つ以上の偶数個の整数のリストとなります。 整数２つごとに順番にペアとなって座標が決定されますが、整数のペアが３組あれば三角形、４組あれば四角形、５組あれば五角形…という具合です。 各ペアは画像の左端と上端からのピクセル距離となります。

shape属性でrectなどのキーワードで四角形を指定している場合には、coords属性の値は４つの整数のリストとなります。 shape="poly"で四角形を指定する場合は８つの整数のリストが必要ですが、 shape="rect"で四角形を指定する場合は４つの整数のリストです。 ４つの整数はそれぞれ順番に、 画像の左端からハイパーリンク領域の左端までのピクセル距離、 画像の上端からハイパーリンク領域の上端までのピクセル距離、 画像の左端からハイパーリンク領域の右端までのピクセル距離、 画像の上端からハイパーリンク領域の下端までのピクセル距離、 となります。

target属性・ping 属性はハイパーリンクをどのようにたどるかを、 rel属性・media属性・hreflang属性・type 属性は、ハイパーリンク先がどのような性質であるかを示す際に指定します。 target属性・ping属性・rel属性・media属性・hreflang属性・type 属性は、 href属性を指定しない場合には省略しなくてはなりません。

■HTML4.01からHTML5へのバージョンアップによる変更点

area要素は、HTML5ではnohref属性が廃止されています。 一方で、新しくhreflang属性・media属性・rel属性・type属性が追加されています。

■属性

■使用例

ブラウザ上の表示

Sponsors