HTMLリファレンスマニュアル

HTMLタグ一覧

HTML: <area> coords属性

coords属性は画像マップエリアのxおよびy座標を指定します。coords属性とshape属性を組み合わせて、エリアの大きさ、形状、位置を指定します。ヒント：画像エリアの左上角の座標は0,0です。

オンラインサンプル

クリック可能なエリアを持つ画像マップ：

例

<!DOCTYPE　html>
<html>
<title>HTML:<area>　coords　属性　-　基本チュートリアルウェブ3codebox.com「/title>
<body>
<p>太陽やその惑星を詳細に見るためにクリックしてください「/p>
<img　src="planets.gif"　width="145"　height="126"　alt="Planets"　usemap="#planetmap">
　　　<map　name="planetmap">
　　<area　shape="rect"　coords="0,0,82,126"　href="sun.html"　alt="Sun">
　　<area　shape="circle"　coords="90,58,3"　href="mercur.html"　alt="Mercury">
　　<area　shape="circle"　coords="124,58,8"　href="venus.html"　alt="Venus">
　　</map>　　
</body>
</html>

テストを見てみましょう「/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザが coords 属性をサポートしています。

定義と使用法

coords 属性は画像地図領域の x と y 座標を指定します。

coords 属性と　shape 属性を組み合わせて使用して、領域の大きさ、形状、位置を指定します。

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

HTML 4.01 HTML5の違い

存在しません。

文法

<area coords="value">

属性値

値	説明
x1,y1,x2,y2	shape 属性が "rect" に設定されている場合、この値は矩形の左上角と右下角の座標を定義します。
x,y,radius	shape 属性が "circ" に設定されている場合、この値は円の中心の座標と半径を定義します。
x1,y1,x2,y2,..,xn,yn	shape 属性が "poly" に設定されている場合、この値は多角形の各頂点の値を定義します。最初の座標と最後の座標が一致しない場合、多角形を閉じるために、ブラウザは最後の座標のペアを追加する必要があります。

　HTML <area> タグ

HTML: <template> タグ