coords 必须基于图片 naturalWidth/naturalHeight 手动填写整数，shape 决定 coords 格式（rect 4个、circle 3个、poly 偶数个），usemap 与 map name 必须逐字节一致（含#），响应式下 coords 不自适应，推荐改用 SVG。
coords 不是算出来的，是按 naturalWidth/naturalHeight 手动填的
浏览器根本不解析设计稿、不读 CSS 缩放、也不管你截图时鼠标在哪——它只认你硬写进 coords 里的整数，而且这些数必须基于图片文件本身的 naturalWidth 和 naturalHeight。
常见错误现象：热区点不中、area 元素在 Elements 面板里明明存在、hover 也不变手型、控制台没报错。
- 用 Sketch/Figma 标注直接抄“120px 从左起” → 忘了 @2x 图要除以 2
- Chrome DevTools 里右键「截图选区」取点 → 返回的是视口坐标，不是原图像素
- HTML 没写
width/height，但 CSS 用了max-width: 100%→ 浏览器仍以naturalWidth为基准，你却按显示宽度填
最稳做法：打开 DevTools → 找到 img 元素 → 右侧面板看 naturalWidth 和 naturalHeight → 拿这个尺寸当标尺，在 PS 或 image-map.net 里手动描点填值。
shape 决定 coords 格式，错一位就失效
shape 不是装饰属性，它直接控制浏览器怎么拆解 coords 字符串。填错数量、顺序或类型，热区要么缩成一个点，要么飞出画布外，浏览器照样不报错。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→ 必须且仅能填 4 个整数：coords="x1,y1,x2,y2"，左上角 + 右下角；要求x1 < x2且y1 < y2 -
shape="circle"→ 必须且仅能填 3 个整数：coords="cx,cy,r"，圆心 + 半径；r不能为 0，也不能超过原图边界（否则可能被截断） -
shape="poly"→ 必须填偶数个整数：coords="x1,y1,x2,y2,x3,y3,..."；每两个一组是顶点；首尾不自动闭合，少一对或多一对，形状就漏边或歪斜
别依赖浏览器“自动补线”——有些版本会连，有些不会。poly 区域建议手动重复第一个点，比如三角形写成 coords="10,20,30,40,50,60,10,20"。
usemap 和 map name 必须逐字节匹配，漏个 # 就静默失效
这是 90% 热区不响应的真正原因。浏览器不校验、不提示、不报错，只把整个 map 当空气处理。
-
<img usemap="#floor-plan">✅ 必须带#，且后面字符串和<map name="floor-plan">完全一致 -
usemap="floor-plan"❌ 漏#，整个映射断开 -
usemap="#Floor-Plan"❌ 大小写不一致，断开 -
<map name="floor_plan">❌ 下划线 vs 连字符，断开
调试时别靠眼睛扫：右键图片 → 「检查」→ 复制 usemap 值 → 再复制 <map name=""> 的 name 值 → 粘贴到编辑器里逐字符比对。
响应式下 coords 无法自适应，JS 动态重算极易出错
coords 是硬编码像素值，它不会随屏幕变小而缩放——这不是 bug，是规范如此。所以当图片被 CSS 缩放后，热区位置就漂移了。
JS 动态重算可行，但极易出错：
- 图片加载完成时机不对 →
naturalWidth还是 0 -
offsetWidth拿到的是含padding/border的尺寸，没减掉 - 多边形
coords字符串解析时顺序错一位，整个形状翻转
更稳的方案是放弃 <map>，改用 <svg>：<rect x="10%" y="20%" width="20%" height="15%"> 原生支持百分比，配合 viewBox 和媒体查询就能自适应。真要用 <map>，就把图片导出为固定尺寸（比如统一 1200×800），所有 coords 全部按这个基准填。
