必须用图片naturalWidth/naturalHeight为基准手动填写coords，shape决定数值个数与规则，usemap与map name须逐字节一致（含#和大小写），响应式需JS动态重算缩放比。
坐标必须按图片原始尺寸（naturalWidth/naturalHeight）手动填写，不是靠截图工具量显示区域、也不是靠设计稿标注直接抄——填错一个数，热区就点不中，浏览器还不报错。
怎么拿到真正的基准尺寸？
别信 CSS 宽高、别信设计稿标尺、别信截图插件返回的视口坐标。唯一可信的是图片文件自身的像素尺寸：
- 打开 Chrome DevTools → Elements 面板 → 找到
<img>元素 → 右侧 Properties 或 Computed 标签页里找naturalWidth和naturalHeight值 - 用这个尺寸当标尺，在 Photoshop / GIMP / image-map.net 里手动量坐标
- 如果是 @2x 图，设计稿标注是 240px，实际 coords 要填
120（除以 2）
coords 怎么填才不被浏览器静默忽略？
shape 决定 coords 解析规则，错一位整个 <area> 失效：
-
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,..."，每两个是一对顶点；首尾不自动闭合，保险起见手动重复第一个点，比如三角形写成"10,20,30,40,50,60,10,20"
usemap 和 map name 不匹配是热区失效的头号原因
浏览器不校验、不提示、不报错，只把整个 <map> 当空气：
立即学习“前端免费学习笔记（深入）”；
-
<img usemap="#floor-plan">✅ 必须带#，且后面字符串和<map name="floor-plan">逐字节一致 -
usemap="floor-plan"❌ 漏掉#，映射断开 -
usemap="#Floor-Plan"❌ 大小写不一致，断开 -
<map name="floor_plan">❌ 下划线 vs 连字符，断开
响应式页面里 coords 为什么总偏？
coords 是硬编码像素值，永远绑定 naturalWidth/naturalHeight，跟 CSS 缩放完全无关：
- 原图 1200×800，你用
img { width: 375px; height: auto; }显示 → coords="0,0,100,100" 实际只占约 31×21px，远低于触控最小推荐尺寸 44×44px - 没有纯 HTML/CSS 自适应方案；JS 动态重算才是唯一可靠解法：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth和img.offsetWidth算出缩放比，再遍历所有<area>的coords字符串，把每个数值乘以比例后重新赋值
最易被忽略的点：coords 不是“算出来”的，是你在原始尺寸标尺下亲手填进去的；而 usemap 和 name 的匹配，差一个字符就全盘失效——它不报错，你只能靠复制粘贴比对来确认。
