热区失效主因是usemap与map name不匹配，必须逐字节一致（含#、大小写、符号）；coords格式须严格按shape类型填写；响应式需JS动态重算坐标；area必须同时含href和alt。
usemap 和 map name 不匹配，热区完全不响应
浏览器不会报错，只会静默忽略整个 <map></map>。这是 90% 热区失效的根源。
必须确保：usemap 属性值以 # 开头，且后面字符串与 <map name="xxx"></map> 的 name 属性**逐字节一致**——大小写、连字符、下划线、空格，差一个就断连。
-
usemap="#floor-plan"✅ 对应<map name="floor-plan"></map> -
usemap="floor-plan"❌ 漏掉#，整个映射被忽略 -
usemap="#Floor-Plan"❌ 大小写不一致，断连 -
<map name="floor_plan"></map>❌ 下划线 vs 连字符，不匹配
调试时别靠肉眼扫：右键图片 → 「检查」→ 复制 usemap 值 → 在开发者工具中全局搜索 <map name="..."></map>，确认是否真的一模一样。
coords 坐标格式错误，热区偏移或消失
coords 不是“随便填的数字”，它由 shape 类型决定解析逻辑。填错一位，热区可能缩成一个点、跑到画布外，甚至覆盖整张图，且无任何错误提示。
立即学习“前端免费学习笔记（深入）”；
必须按规则填写：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳（如"100,50,200,50,150,150,100,50"）
常见错误：
- 把设计稿里“居中坐标”或“百分比坐标”直接当
coords填 -
poly坐标导出带了空格或换行（如"100, 50"），Safari 静默跳过该区域 - 用图像编辑器量坐标时，没确认当前图层是原始拼接大图（而非缩放预览图）
响应式下图片缩放，coords 全部错位
原生 <map></map> 没有响应式能力。max-width: 100%、vw 单位、CSS transform: scale() 都会让固定像素坐标失效——移动端几乎必错位。
所有 coords 都基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是渲染后尺寸。
必须在 JS 中动态重算：
- 记录原始尺寸：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历每个
<area>，按shape类型分别处理：
矩形缩放全部 4 个值，圆形缩放圆心 + 半径，多边形逐对缩放x/y - 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
临时验证可用：img { border: 1px solid red; }，再用开发者工具「截图选区」比对坐标是否对齐。
area 缺 href 或 alt，语义与兼容性双崩
<area> 必须同时含 href 和 alt，否则功能和可访问性都会出问题。
- 缺
href：点击无跳转行为，链接无效（即使绑了onclick，键盘回车也无法触发） - 缺
alt：屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该区域 - 即使只是做交互占位，也建议写
href="#"+alt="描述性文字"（例如alt="点击进入厨房区域"）
注意：<area> 必须嵌套在 <map></map> 内，单独写在外面会被浏览器忽略；<map></map> 本身不渲染内容，也不能放在 或 display: none 容器里。
