[HTML]HTML<area> 标签的shape与coords 属性W3CSHOOL
2012-02-21 09:03
821 查看
定义和用法
shape 属性与coords 属性配合,可以规定区域的尺寸、形状和位置。
详细解释:
shape 属性用于定义图像映射中对鼠标敏感的区域的形状:圆形(circ 或 circle)
多边形(poly 或 polygon)
矩形(rect 或 rectangle)
shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性,那么会假设使用值 default。依照标准,default 意味着该区域覆盖整个图像。在实际中,浏览器默认使用矩形区域,并期望能找到 4 个 coords 值。如果没有指定形状,而且在标签中也没有包括 4 个坐标,那么浏览器会忽略整个区域。
实际上,Netscape 是唯一可以识别 shape 属性的 default 值的浏览器,它可以提供一个包括全部热点的区域,以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序,所有必须将默认区域放置在后面。否则,默认区域会覆盖其他的图像映射中出现的所有区域。
浏览器在形状名称的实现方面没有严格要求。例如,对于矩形,Netscape 4 不能识别 "rectangle",却能识别 "rect"。出于这个原因,我们建议使用缩写的名称。
实例
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area [code]shape="rect"coords="0,0,110,260" href="sun.htm" alt="Sun" />
<area
shape="circle"coords="129,161,10" href="mercur.htm" alt="Mercury" />
<area
shape="circle"coords="180,139,14" href="venus.htm" alt="Venus" />
</map>
[/code]
TIY
浏览器支持
所有浏览器都支持 shape 属性。语法
<a shape="value">
属性值
值 | 描述 |
---|---|
default | 规定全部区域。 |
rect | 定义矩形区域。 |
circ | 定义圆形。 |
poly | 定义多边形区域。 |
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="nohref"> <area shape="circ" coords="50,50,25" nohref="nohref"> </map>
相关文章推荐
- [HTML]HTML<area> 标签的shape与coords 属性W3CSHOOL
- HTML <a> 标签的 target 属性
- HTML <a> 标签的 href 属性
- HTML <form> 标签的 method 属性
- HTML <base> 标签的 href 属性
- HTML <a> 标签的 rel 属性
- HTML <input> 标签的 type 属性
- HTML <a> 标签的 target 属性
- HTML <input> 标签的 type 属性
- HTML <area> 标签区域map标签
- HTML <div> 标签的 align 属性
- HTML <table> 标签的 frame 属性
- HTML中<a>标签的target属性参考
- HTML学习记录<二>:标签的 target 属性中的_blank _self _parent _top
- HTML <input> 标签的 type 属性
- HTML <ol> 标签的 type 属性
- HTML <form> 标签的 enctype 属性
- HTML <base> 标签的 target 属性 —— <base target="_blank" />
- HTML <area>标签 画热点
- 普通html中<form>标签和struts2中<s:form>标签action属性的不同