使用 <map> 和 <area> 可为图片创建多热区链接，需 <img>（含 usemap="#name"）、<map name="name"> 和至少一个 <area> 共同配合；shape 与 coords 精确设定区域，支持 rect、circle、poly；须添加 alt 提升可访问性，注意坐标基于原始尺寸、大小写敏感及移动端适配。
使用 <map> 和 <area> 标签可以为一张图片的不同区域设置可点击的热区（image map），每个热区指向独立链接。关键在于图片与地图通过 usemap 属性关联，且 <area> 必须定义形状、坐标和目标地址。
基础结构：img + map + area 缺一不可
必须同时存在三个部分：<img>（带 usemap 属性）、<map>（带对应 name）、若干 <area>（定义热区）。usemap 的值需以 # 开头，与 <map name="xxx"> 中的 name 严格匹配。
<img src="plan.png" usemap="#building-map"><map name="building-map"><area shape="rect" coords="10,10,100,80" href="lobby.html" alt="大堂"><area shape="circle" coords="200,60,30" href="roof.html" alt="屋顶"></map>
shape 与 coords：准确描述热区范围
shape 决定热区几何类型，coords 提供像素坐标（相对图片左上角原点）。常见组合：
-
矩形（rect）：4个值 ——
left, top, right, bottom，如coords="50,30,180,120" -
圆形（circle）：3个值 ——
center-x, center-y, radius，如coords="120,90,25" -
多边形（poly）：至少3组
x,y坐标，用逗号分隔，如coords="10,20,40,30,35,80,5,70"
建议用图像编辑工具（如 Photoshop）或在线 map 工具辅助获取坐标，避免手动估算出错。
立即学习“前端免费学习笔记（深入）”；
增强可用性与兼容性的实用技巧
仅靠默认行为不够友好，加入以下优化更稳妥：
- 为每个
<area>添加alt属性，提升无障碍访问支持 - 添加
target="_blank"控制新窗口打开（按需），如href="room201.html" target="_blank" - 用 CSS 配合
:hover模拟悬停效果（原生不支持样式），例如给<img>加style="cursor: pointer;" - 确保图片加载完成后再交互；若图片失败，
<map>将失效，可考虑降级方案（如用 div+绝对定位模拟）
注意浏览器行为与常见问题
现代浏览器均支持标准用法，但需留意：
-
usemap值大小写敏感，#Building-Map和#building-map不等价 -
<area>无闭合标签，不要写成</area> - 坐标单位是像素，且基于原始图片尺寸；缩放图片（如 CSS
width）会导致热区偏移，应优先用响应式 map 或 JavaScript 动态计算 - 移动端点击区域小，建议热区最小尺寸不小于 44×44px，并测试真机触控精度
