HTML <area> 标签的shape属性定义和用法
shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
HTML <area> 标签的shape属性详细解释：
shape 属性用于定义图像映射中对鼠标敏感的区域的形状：
圆形（circ 或 circle）
多边形（poly 或 polygon）
矩形（rect 或 rectangle）
shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。
可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。
浏览器在形状名称的实现方面没有严格要求。例如，对于矩形，Netscape 4 不能识别 "rectangle"，却能识别 "rect"。出于这个原因，我们建议使用缩写的名称。
HTML <area> 标签的shape属性语法
<a shape="value">
属性值 值描述
default规定全部区域。
rect定义矩形区域。
circ定义圆形。
poly定义多边形区域。
HTML <area> 标签的shape属性示例代码:
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="/article/sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="/article/mercur.htm" alt="Mercury" />
<area shape="circle" coords="180,139,14" href="/article/venus.htm" alt="Venus" />
</map>
HTML <area> 标签的coords属性定义和用法
coords 属性规定区域的 x 和 y 坐标。coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。图像左上角的坐标是 "0,0"。
HTML <area> 标签的coords属性详细解释：
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
下面列出了每种形状的适当值：
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如，下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处，定义了一个对鼠标敏感的区域，并在图像的正中间定义了一个圆形区域。
<map name="map">
<area shape="rect" coords="75,75,99,99" nohref="/article/nohref/index.html">
<area shape="circ" coords="50,50,25" nohref="/article/nohref/index.html">
</map>
HTML <area> 标签的coords属性提示和注释
注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
HTML <area> 标签的coords属性语法
<area coords="value">
属性值 值描述
x1,y1,x2,y2如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。
HTML <area> 标签的coords属性示例代码:
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="/article/sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="/article/mercur.htm" alt="Mercury" />
<area shape="circle" coords="180,139,14" href="/article/venus.htm" alt="Venus" />
</map>
