coords 属性

coords 属性は area 要素における領域の座標を指定します。

座標は、1つの点につき、X軸、Y軸の座標のセットによって表されます。座標の基点は画像の左上隅になりますので、例えば、画像の左上隅を 0,0 として、左上隅から 100px 四方の四角形の領域を指定する場合、領域右下隅の座標は、100,100 となります。

これを、実際に指定すると下記のようになります。

coords="0,0,100,100"

多角形の場合、例えば三角形なら、最低 3つの座標がわかれば指定可能です。座標は X/Y 軸の組み合わせになるため、6つ以上、偶数の値となります。

[頂点 1 の X座標] , [頂点 1 の Y座標] , [頂点 2 の X座標] , [頂点 3 の X座標] , [頂点 3 の X座標] , [頂点 3 の X座標]

五角形の場合は、5つの頂点の座標を指定しますので、値は全部で 10個になります。このように必ず偶数になるはずです。

円形の場合は、中心の座標を指定した上で、半径を指定することで領域を指定しますので、下記のような指定になります。

[中心点の X座標] , [中心点の Y座標] , [半径]

詳しくは map 要素、及び area 要素の解説をあわせてご確認ください。

なお、shape 属性の値によって、coords 属性が持つべき値の数が決まります。

shape 属性値	coords 属性に指定する値の数
circle	3つの整数
default	coords 属性を指定してはいけません
poly	6つ以上の偶数個の整数
rect	4つの整数

<!-- 地図画像を使用したクリッカブルマップの例 -->
<figure>
 <figcaption>エリア選択マップ</figcaption>
 <img src="map.png" usemap="#map" alt="関東 6県の地図。県を選択するとそのエリアの店舗一覧に移動します。埼玉県は現在営業所がありません。" />
 <map name="map">
  <area shape="rect" coords="50,50,100,100" />
  <area shape="rect" coords="50,100,100,200" href="tokyo.html" alt="東京都" />
  <area shape="rect" coords="0,100,50,200" href="kanagawa.html" alt="神奈川県" />
  …省略…
 </map>
</figure>