map,area的使用

HTML <map>元素是使用<area>元素定义一个图像地图（点击链接）。

1. 在页面中需要有一个img元素，且该img元素需要一个usemap属性
2. map元素必须有name属性，
3. 若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>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

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;

转载于:https://www.cnblogs.com/mamba-note/p/6583082.html