HTML <area> shape属性

HTML <area> タグ

定義と使用方法

shape 属性が領域の形状を規定します。

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

例

shape属性を使用して、イメージマップ内の各領域の形状を指定します：

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

実際に試してみてください

文法

<area shape="default|rect|circle|poly">

属性値

値 説明
default 全体の領域を指定します。
rect 矩形領域を定義します。
circle 円形領域を定義します。
poly 多角形領域を定義します。

詳細な説明：

shape 属性は、イメージマップ内でマウスに反応する領域の形状を定義するために使用されます：

  • 円形（circまたはcircle）
  • 多角形（polyまたはpolygon）
  • 矩形（rectまたはrectangle）

shape 属性の値は、ブラウザが coords 属性を解釈する方法に影響を与えます。未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。

可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。

浏览器在形状名称的实现方面没有严格要求。例如，对于矩形，Netscape 4 不能识别 "rectangle"，却能识别 "rect"。出于这个原因，我们建议使用缩写的名称。

浏览器支持

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

HTML <area> タグ