usemap 和 map 的 name 必须逐字节匹配，且 coords 格式须严格对应 shape 类型；响应式下需 JS 动态重算 coords，area 必须有 href 和 alt 且为 map 直接子元素。
usemap 和 map 的 name 必须逐字节匹配
热区不响应点击，90% 是因为 usemap 和 <map name=""></map> 没对上。浏览器不报错，只静默失效。
必须满足：
- usemap 值以 # 开头，如 usemap="#floorplan"
- <map></map> 的 name 属性值必须是 floorplan（不含 #）
- 大小写、连字符、下划线全部敏感，usemap="#FloorPlan" ≠ <map name="floorplan"></map>
- <map></map> 不能用 id 替代 name，usemap 完全忽略 id
调试建议：复制粘贴比对，别靠眼睛扫；临时加 style="outline: 2px solid red" 到 <img>，确认图片渲染正常。
shape 和 coords 格式必须严格对应
coords 不是“随便填的像素”，而是由 shape 决定的固定结构。填错一位，热区就缩成点、偏到画布外，或覆盖整张图。
常见组合：
- shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足 x1 < x2 且 y1 < y2
- shape="circle" → coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0）
- shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳（如 "10,10,50,10,50,40,10,40,10,10"）
禁止使用 shape="default" 做兜底——它会捕获所有未被其他 <area> 覆盖的点击，干扰调试。
立即学习“前端免费学习笔记（深入）”；
响应式页面中 coords 会彻底错位
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要用了 width: 100%、max-width 或任何缩放样式，热区立刻偏移。
例如：原始图 1200×800，coords="0,0,100,100" 是左上角 100×100 区域；缩放到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控推荐最小尺寸 44×44px。
没有纯 HTML/CSS 方案能自动适配。唯一可靠解法是 JS 动态重算：
- 监听 window.addEventListener('resize', updateCoords) 和 img.addEventListener('load', updateCoords)
- 在 updateCoords() 中读取缩放比：scale = img.offsetWidth / img.naturalWidth
- 遍历所有 <area>，把每个 coords 数值乘以 scale 后重新赋值
如果项目已重度响应式，直接改用 SVG —— 矢量热区天然支持缩放，且支持完整 ARIA。
area 必须有 href 和 alt，且不能脱离 map 存在
<area> 是空元素，不能自闭合（<area /> 是错的），且必须是 <map> 的直接子节点。放在 <div> 里、或写在 <map> 外，所有浏览器都无视。
每个 <area> 必须带：
- href：必须为有效 URL，如 ./room201.html 或 javascript:void(0)；纯 #id 不支持锚点跳转
- alt：W3C 强制要求，哪怕空字符串 alt=""；屏幕阅读器只读这个，不是 title 或 aria-label（二者均被忽略）
移动端需额外注意：iOS Safari 对小面积 poly 热点响应迟钝，建议最小热区 ≥ 44×44px，并测试真机触控精度。
