map，area标签

Posted 2020-07-04 animagi

map，area标签

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
  <area 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>

　　a、shape 属性：

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

 

（建议使用缩写，最后写default）

　　b、coords 属性：

　　圆形：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" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。（如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标）

　　c、nohref 属性规定该区域没有相关的链接：  nohref="nohref"