area 标签与 a 标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。
area 是整个 html 规则中唯一支持非矩形热区的标签,它的 shape 属性支持三种类型。
<ul>
<li>圆形:circle 或者 circ,coords 支持三个值,分别表示中心点的 x,y 坐标和圆形半径 r。</li>
<li>矩形:rect 或者 rectangle,coords 支持两个值,分别表示两个对角顶点 x1,y1 和 x2,y2。</li>
<li>多边形:poly 或者 polygon,coords 至少包括 6 个值,表示多边形的各个顶点。</li>
</ul>
因为 area 设计的时间较早,所以不支持含有各种曲线的路径,但是它也是唯一一个支持了非矩形触发区域的元素,所以,对于一些效果而言,area 是必不可少的。
area 必须跟 img 和 map 标签配合使用。使用示例如下(例子来自 html 标准)。
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>
</p>
这个例子展示了在一张图片上画热区并且产生链接,分别使用了矩形、圆形和多边形三种 area。
转自 -- 极客时间《重学前端》 程劭非(winter)