热区失效主因是usemap与map的name不严格匹配、coords格式错误或area未嵌套在map中。必须确保usemap="#x"与map name="x"逐字节一致，area需置于map内且含href和alt，coords按shape规则书写并基于图片原始尺寸，响应式场景推荐改用SVG。
热区设不起来，90% 是 usemap 和 map 的 name 没对上，或者 coords 格式错了一位——浏览器不报错，只静默失效。
usemap="#xxx" 和 map name="xxx" 必须逐字节一致
这不是“差不多就行”的匹配，而是严格字符串相等：大小写、连字符、空格、有无下划线，全算在内。
-
usemap="#floor-plan"✅ 必须对应<map name="floor-plan"></map> -
usemap="floor-plan"❌ 缺#，整个map被忽略 -
usemap="#Floor-Plan"❌ 大写 F/P，name="floor-plan"就断连 -
usemap="#floor_plan"❌ 下划线 ≠ 连字符，不匹配
调试时别靠眼睛扫，直接复制 usemap 值，去掉开头 #，再和 map 的 name 属性值做字符串比对。
area 必须嵌在 map 里，且 href 和 alt 不可省略
area 单独写在 HTML 里完全无效，它不是独立交互元素，只是热区描述符。
- 结构必须是：
<img usemap="#x"><map name="x"><area href="..." alt="..."></map> -
href缺失 → 点击无跳转，部分浏览器甚至不触发手型光标 -
alt缺失 → 可访问性失败，屏幕阅读器无法读出区域用途，某些浏览器也会降级处理 -
map不能放在或注释中，必须在内可渲染位置
coords 值顺序取决于 shape，不是固定“左上右下”
坐标解析完全由 shape 决定，填错个数或顺序，热区就偏移或消失，控制台也不提示。
-
shape="rect"→coords="x1,y1,x2,y2"（左上角 + 右下角像素值） -
shape="circle"→coords="cx,cy,r"（圆心 x、y + 半径，不是直径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（至少三组点，x/y 交替，首尾不自动闭合但浏览器会连线） - 逗号必须紧挨数字，
"10,20,100,50"✅，"10, 20, 100, 50"❌（空格导致解析中断）
坐标永远基于图片原始尺寸（如 800×600 的 PNG），CSS 缩放（width: 100%）、transform 或高 DPR 设备都会让热区错位——这是最隐蔽的兼容性坑。
移动端和响应式场景下，map 基本不可靠
原生 map 没有 resize 或 DPR 自适应机制，缩放后热区必然漂移。真要支持响应式，得用 JS 动态重算 coords，或者直接换方案。
- 用
img的naturalWidth/naturalHeight获取原始尺寸 - 监听
window.resize和devicePixelRatio变化，按比例重设所有area的coords - 更推荐用 SVG 替代：每个
<path></path>或<rect></rect>可设href，天然响应式，坐标随 viewBox 缩放
原生 map 的价值只剩 SEO 友好和极简静态页；只要涉及缩放、DPR 或动态内容，就得准备好手写坐标换算逻辑，或者切到 SVG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
