HTML <area> 标签的 shape 属性

shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。

实例

<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img src="/images/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets">
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="/example/html/venus.html" target="_blank" alt="Venus">
<area shape="circle" coords="129,161,10" href="/example/html/mercur.html" target="_blank" alt="Mercury">
<area shape="rect" coords="0,0,110,260" href="/example/html/sun.html" target="_blank" alt="Sun">
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>

运行一下

定义和用法

shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。

详细解释：

shape 属性用于定义图像映射中对鼠标敏感的区域的形状：

圆形（circ 或 circle）
多边形（poly 或 polygon）
矩形（rect 或 rectangle）

shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。

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

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

浏览器支持

所有浏览器都支持 shape 属性。

语法

<a shape="value">

属性值

值	描述
default	规定全部区域。
rect	定义矩形区域。
circ	定义圆形。
poly	定义多边形区域。

HTML <area> 标签的 shape 属性

实例

定义和用法

详细解释：

浏览器支持

语法

属性值

分类导航