HTML <map>元素是使用<area>元素定义一个图像地图(点击链接)。
- 在页面中需要有一个img元素,且该img元素需要一个usemap属性
- map元素必须有name属性,
- 若map元素有id;责id与name的属性值必须保持一致。
<map name="primary">
<area shape="circle" coords="75,75,75" href="left.html" alt="">
<area shape="circle" coords="275,75,75" href="right.html" alt="">
</map>
![350 x 150 pic](http://placehold.it/350x150)
shape、 coords: 定义区域形状
圆形:shape="circle",coords="x,y,z"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
矩形:shape="rect",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。
多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
自带outline属性
area不能定义hover、active等伪类;但却自带:focus伪类;而且只能定义其outline的颜色,也可设置:
outline: none;