オンラインツール

参照マニュアル

: <progress> タグ

HTML: <a> coords 属性

オンラインサンプル

在<a>要素中使用shapeとcoords属性で画像マッピングを作成します：

例
!doctype　html>
<html>
<head>　-　<title>html:　<a>　coords属性の使用3codebox.com)</title>
</head>
<body>
<p>画像の中の太陽や近くの惑星をクリックしてください:/p>
<object data="planets.gif" alt="Planets" type="image/gif" usemap="#Map1">
　<map name="Map1">
　　　<a href="sun.html" shape="rect" coords="0,0,82,126">太陽</a>
　　　<a href="mercur.html" shape="circle" coords="90,,58,3">水星</a>
　　　<a href="venus.html" shape="circle" coords="124,58,8">金星</a>
　</map>
</object>
<p><b>注意:/b>　現在、　Firefox　および　Opera　ブラウザのみが　coords　属性をサポートしています。</p>
</body>
</html>

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

ブラウザの互換性

IEFirefoxOperaChromeSafari

現在、coords属性をサポートしているのはFirefoxとOperaのみです。

定義と使用方法

HTML5<a> coords属性はサポートされていません。

coords属性は通常、以下の属性と一緒に使用されます。 shape 属性を組み合わせて使用し、<object>または<img>要素のリンクのサイズ、形状、位置を定義します。

左上角の座標は 0,0 です。

ヒント：すべてのブラウザで使用できるイメージマップを作成するには、以下の属性を使用してください。 <area> 　要素。

構文

<a coords="value">

属性値

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

HTML <a> タグ

HTML: <template> タグ