usemap与map name不匹配是最常见失效原因，必须逐字节一致（含#、大小写、连字符、空格）；coords基于原始像素，css缩放会导致偏移；area须嵌套于map内且href、alt不可省略。
usemap 和 map name 不匹配是最常见失效原因
浏览器只认 usemap="#xxx" 和 <map name="xxx"></map> 完全一致（大小写、连字符、空格）的配对。写成 usemap="xxx"（漏#）、usemap="#XXX"（大小写错）、<map id="xxx"></map>（只写 id 不写 name）都会断连。
实操建议：
- 统一用小写字母 + 连字符命名，比如
name="product-map"→usemap="#product-map" - 在 Chrome 开发者工具中右键图片 → “检查”，看能否高亮到对应
<map></map>；不能高亮，基本就是关联失败 - 控制台搜
The image map reference，出现该警告说明usemap指向的<map></map>根本不存在
coords 坐标写错导致热区消失或偏移
coords 是按原始图片像素写的绝对值，不是显示尺寸，也不受 CSS 缩放影响。一张 1200×800 的图缩成 600×400 显示，coords="0,0,100,100" 仍指原图左上角 100×100 区域——现在它只占屏幕 50×50 像素，点起来必然偏。
常见错误现象：
- 鼠标悬停无手型，
getBoundingClientRect()返回空区域 - poly 形状点不准，顶点顺序混乱或坐标含空格（如
"100, 200"中的空格会被截断） - rect 写成
x2,y2,x1,y1（顺序颠倒），区域直接不渲染
调试建议：
- 用开发者工具打开图片链接，在新标签页查看真实尺寸，再量取坐标
- 临时给
<img>加style="max-width:90%"，配合“Toggle element screenshot”比对位置 - poly 至少要 6 个数字（3 个点），且必须为偶数个；不要手动重复首点，浏览器会自动闭合
area 标签结构或属性缺失引发静默失效
<area> 是空元素，但不是随便放哪都行：它必须严格嵌套在 <map></map> 内部，不能被 <div>、注释或 <code><script></script> 包裹，也不能放在 或 <template></template> 里。
两个属性不可省略：
-
href：空字符串、#id或没引号的路径（如href=page.html）都会失效；必须是有效 URL，如href="./detail.html"或href="javascript:void(0)" -
alt：不是可选的，是无障碍刚需；alt=""或alt="点击这里"违反 WCAG，屏幕阅读器会跳过该热区
其他易踩坑点：
- shape 只接受
rect、circle、poly、default；写成square或triangle会被浏览器忽略 -
<map></map>必须和<img>在同一 DOM 上下文；若<img>在 Shadow DOM 里，外部<map></map>默认不可见 - 父容器或
<img>上写了pointer-events: none，整个热区直接失活
响应式场景下 coords 失效却查不到报错
原生 <area> 不支持百分比坐标，HTML5 已废弃该用法。只要图片用了 max-width: 100%、vw 单位或 object-fit，固定像素的 coords 就必然错位——这不是 bug，是规范限制。
没有银弹，只有两种务实选择：
- JS 动态重算：监听
resize，按缩放比例重新设置area.coords；注意需在图片加载完成后再计算，否则naturalWidth为 0 - 改用
<svg></svg>：用<path></path>描述热区，天然响应式，支持viewBox和事件委托，复杂多边形维护成本更低
移动端还要额外注意：poly 热区最小尺寸建议 ≥ 44px，否则 iOS Safari 响应迟钝；别依赖 onclick 内联，得用 touchstart 并 preventDefault() 消除 300ms 延迟。
