area标签必须嵌套在map内，且href和alt不可省略；usemap与map的name必须逐字节匹配；coords需基于原始图片尺寸，响应式下须用JS动态重算缩放比。
area 标签必须嵌套在 map 内，且 href 和 alt 不可省略
问答热区本质仍是图像映射，不是 JS 模拟点击。浏览器只认 map 里直接子节点的 area，写在 div 或 section 里就彻底失效。每个 area 必须带 href（哪怕只是 href="javascript:void(0)"）和 alt——前者保障键盘回车、右键新标签页等原生行为；后者让屏幕阅读器能读出“点击此处查看第3题答案”，否则视障用户完全无法参与问答。
常见错误现象：area 元素在开发者工具里可见，但鼠标悬停不出现手型，点击无响应，控制台也无报错。大概率是漏了 alt，或 href 值写成 #q3 这种无效片段（没对应 id），应改为 ./faq.html#q3 或用 JS 拦截后 event.preventDefault()。
usemap="#xxx" 和 map name="xxx" 必须逐字节匹配
这是 90% 问答热区“点了没反应”的根因。浏览器对大小写、连字符、空格、# 前缀极其敏感，错一个字符就静默忽略整张热区图。
-
usemap="#faq-map"✅ 必须对应<map name="faq-map"></map>（注意：name里没有#） -
usemap="faq-map"❌ 漏掉#，整个map被跳过 -
usemap="#FAQ-Map"❌ 大小写不一致，断连 -
name="faq_map"❌ 下划线 vs 连字符，不匹配
调试建议：在开发者工具中复制 img 的 usemap 值，再复制 map 的 name 值，用文本比对工具逐字符核对，别靠肉眼扫。
立即学习“前端免费学习笔记（深入）”；
coords 坐标必须基于原始图片尺寸，不能按 CSS 缩放折算
问答图若是拼接图（如九宫格题目+答案缩略图），所有 coords 都得按导出后的完整大图像素位置填。比如原始图 1200×800，你用 img { max-width: 100%; height: auto; } 在手机上显示为 375px 宽，那 coords="0,0,200,150" 仍要照写——浏览器内部仍按 1200×800 解析，不会自动除以 3.2。
容易踩的坑：
- 直接拿设计稿标注的“居中坐标”填
coords，结果热区漂移 - 用在线生成器导出
coords时带了空格，如"100, 50, 200, 150"→ Safari 静默忽略 - 多边形热区顶点数为奇数（如
"100,50,200,50,150"只有 5 个数），Firefox 不渲染
实操建议：用 Figma 或 Photoshop 打开原始大图，开启标尺和参考线，量出每个问题区域左上角 (x1,y1) 和右下角 (x2,y2)，填入 shape="rect" 的 coords；若区域不规则，用 poly 并确保坐标对数为偶数、首尾点手动重复闭合。
响应式下热区失灵？JS 动态重算 coords 是唯一可靠解法
纯 HTML/CSS 无法适配缩放。只要图片宽高被 CSS 改变（包括 max-width、width: 50%、transform: scale()），原始 coords 就必然错位。移动端触控区可能缩到 30×20px，远低于推荐最小尺寸 44×44px。
必须加 JS 监听并重算：
- 监听
window.addEventListener('resize', updateCoords)和img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth和img.offsetWidth，算出横向缩放比scaleX = img.offsetWidth / img.naturalWidth（同理算scaleY） - 遍历所有
area，按shape类型拆分coords字符串，把每个数值乘以对应缩放比，再拼回字符串赋值给area.coords
复杂点在于：如果问答图是 Canvas 动态生成的，必须在导出时同步记录各题区域原始坐标，不能靠 JS 运行时测量 DOM —— 那样精度不够，且 Canvas 像素与 CSS 渲染像素常不一致。
