HTML <area> coords 属性

HTML <area> タグ

定義と使用法

coords属性 属性は画像マッピング中の領域の座標を指定します。

coords属性 属性と shape属性 領域の大きさ、形状、位置を指定するために一緒に使用されます。

ヒント：領域の左上角の座標は0,0です。

注意：「area」タグの座標が他の領域と重複している場合、最初に現れた「area」タグが優先されます。ブラウザは画像の範囲外の座標を無視します。

例

画像マッピング中の各領域の座標を「coords」属性で指定します：

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

自分で試してみる

構文

<area coords="value">

属性値

値 説明
x1,y1,x2,y2 矩形の左上角と右下角の座標（shape="rect"）を指定します。
x,y,radius 円の中心の座標と半径（shape="circle"）を指定します。
x1,y1,x2,y2,...,xn,yn

多角形の辺の座標を指定します。

最初の座標ペアと最後の座標ペアが異なる場合、ブラウザは最後の座標ペアを追加して多角形を閉じます（shape="poly"）。

詳細な説明：

「<area>」タグの「coords」属性は、クライアント側の画像マッピングにおけるマウスが反応する領域の座標を定義します。座標の数値とその意味は、shape属性で決定された領域の形状に依存します。クライアント側の画像マッピングにおけるハイパーリンク領域を矩形、円、多角形などに定義できます。

以下に各形状の適切な値を挙げます：

円：shape="circle"、coords="x,y,z"

ここでのxとyは円の中心の位置を定義します（「0,0」は画像の左上角の座標です）、rはピクセル単位の円の半径です。

多角形：shape="polygon"、coords="x1,y1,x2,y2,x3,y3,..."

「x,y」の座標ペアは多角形の頂点を1つ定義します（「0,0」は画像の左上角の座標です）。三角形を定義するには少なくとも3つの座標が必要です；高緯度多角形にはさらに多くの頂点が必要です。

多角形は自動的に閉じるため、リストの最後に最初の座標を繰り返して全体のエリアを閉じる必要はありません。

矩形：shape="rectangle"、coords="x1,y1,x2,y2"

最初の座標は矩形の角の頂点の座標であり、もう一つの座標は対角線の頂点の座標です。「0,0」は画像の左上角の座標です。矩形を定義するのは、四つの頂点を持つ多角形を定義する方法の簡略化です。

例えば、以下のXHTMLの一部は、100x100ピクセルの画像の右下四分の一に位置し、マウスに反応するエリアを定義し、画像の中央に円形のエリアを定義しています。

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <area> タグ