<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<!-- area标签在图像上划分可以点击的区域 -->
<!-- usemap属性制定图像映射 -->
<img src="image.png" width="200" height="100" alt="image" usemap="#image_map">
<!-- area嵌套在标签内部 -->
<!-- alt指定图片无法正常显示时的信息 -->
<!-- href指定划分区域的链接 -->
<!-- target属性的用法和a标签相同 -->
<!-- shape指定图形形状，coords指定坐标或半径 -->
<map name="image_map">
<!-- 矩形，(x1,y1)和(x2,y2)指定左上角和右下角坐标 -->
<area shape="rect" coords="x1,y1,x2,y2" alt="rect" href="rect.png">
<!-- 圆形，(x,y)和r分别指定圆心和半径 -->
<area shape="circle" coords="x,y,r" alt="circle" href="circle.png">
<!-- 多边形，(xn,yn)依次指定各个顶点的坐标 -->
<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" alt="poly" href="poly.png">
</map>
</body>
</html>
a tag: https://blog.csdn.net/Tiezhu_Wang/article/details/114836103