HTML的图像映射功能允许我们在一张图片上划分多个可点击的区域，每个区域可以对应不同的链接或者交互逻辑，这个功能主要通过map标签和area标签配合实现。下面我们来看具体的实现步骤和相关知识点。
图像映射的核心标签说明
img标签的usemap属性
首先需要在img标签中通过usemap属性关联对应的map标签，usemap的值需要和map标签的name属性值对应，格式为#加上map的name值。需要注意的是，img标签必须设置usemap属性才能启用图像映射功能。
map标签
map标签用于定义图像映射的区域集合，它只有一个核心属性name，用来作为映射的唯一标识，供img标签的usemap属性引用。map标签内部可以包含多个area标签，每个area标签代表一个热点区域。
area标签
area标签用来定义图像上的单个热点区域，它不需要闭合标签，核心属性包括以下几个：
- shape：定义热点区域的形状，可选值有rect（矩形）、circle（圆形）、poly（多边形）
- coords：根据shape的不同，设置区域的坐标参数，具体规则后面会详细说明
- href：点击该区域后跳转的链接地址，如果不需要跳转可以设置为空或者不写该属性
- alt：区域的替代文本，当区域无法显示时展示，也用于无障碍访问
coords属性的参数规则
coords属性的值根据shape的不同，格式也有区别，具体对应关系如下：
| shape值 | coords参数格式 | 参数说明 |
|---|---|---|
| rect | x1,y1,x2,y2 | x1,y1是矩形左上角的坐标，x2,y2是矩形右下角的坐标 |
| circle | x,y,radius | x,y是圆心的坐标，radius是圆的半径 |
| poly | x1,y1,x2,y2,x3,y3... | 依次填写多边形每个顶点的坐标，至少需要三个顶点 |
这里的坐标都是相对于图片左上角的像素值，坐标原点为图片的左上角，x轴向右延伸，y轴向下延伸。
完整实战示例
下面我们写一个完整的示例，一张图片上划分三个不同形状的热点区域，分别跳转到不同的地址：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML图像映射示例</title>
</head>
<body>
<!-- 图片关联名为mymap的映射 -->
<img src="https://ipipp.com/test.jpg" alt="示例图片" usemap="#mymap" width="800" height="400">
<!-- 定义图像映射 -->
<map name="mymap">
<!-- 矩形区域：左上角(100,50)，右下角(300,150)，跳转到首页 -->
<area shape="rect" coords="100,50,300,150" href="https://ipipp.com/index" alt="首页区域">
<!-- 圆形区域：圆心(400,200)，半径50，跳转到列表页 -->
<area shape="circle" coords="400,200,50" href="https://ipipp.com/list" alt="列表区域">
<!-- 多边形区域：三个顶点(500,100),(600,300),(500,300)，跳转到详情页 -->
<area shape="poly" coords="500,100,600,300,500,300" href="https://ipipp.com/detail" alt="详情区域">
</map>
</body>
</html>
注意事项
在实际使用图像映射时，有几个点需要特别注意：
- 图片的width和height属性最好显式设置，避免图片缩放后热点区域坐标和实际显示位置不匹配
- 如果热点区域不需要跳转，可以将href属性设置为
javascript:void(0);，或者省略href属性，同时可以通过onclick属性绑定自定义的交互逻辑 - area标签的alt属性不要省略，这对屏幕阅读器用户非常重要，能让他们知道每个热点区域的作用
- coords的坐标值需要根据实际图片的尺寸来调整，如果图片尺寸发生变化，对应的坐标也需要同步修改
常见问题解答
热点区域不生效怎么办？
首先检查img标签的usemap属性值是否和map标签的name属性值对应，注意usemap的值需要带#前缀。其次检查coords的坐标是否在图片的有效范围内，最后确认area标签的shape和coords格式是否匹配。
可以实现不规则形状的热点区域吗？
可以通过shape="poly"来定义多边形热点区域，只要依次填写不规则形状所有顶点的坐标即可，顶点数量没有上限，能够覆盖绝大多数不规则形状的需求。