rect需4个值（x1,y1,x2,y2），circle需3个值（cx,cy,r），poly需偶数个值（x1,y1,x2,y2,…）；所有坐标基于图片naturalWidth/Height，严格小写shape匹配，错一位即静默失效。
rect / circle / poly 的 coords 格式怎么写
三种形状的 coords 必须严格按格式填，错一位或少一个数，整个 <area> 就静默失效——浏览器不报错，但鼠标悬停没手型，点击无反应。
常见写法：
-
rect：左上角 x,y + 右下角 x,y，如coords="50,30,120,90"（注意不是宽高，是两个顶点） -
circle：圆心 x,y + 半径 r，如coords="200,150,40"（半径单位是像素，不是 CSS 的 rem 或 %） -
poly：依次列出所有顶点 x,y，如coords="80,60,110,40,140,60,110,80"（至少 6 个数字，即 3 个点；顺序影响区域朝向，建议顺时针或逆时针闭合）
所有坐标都从图片左上角 (0,0) 开始算，Y 轴向下增长。别用截图工具标“距顶部 100px”就直接填 100——得确认截图是否含浏览器 UI、缩放比例是否为 100%。
usemap 和 map 的 name 为什么总不生效
最常踩的坑是字符串不一致：<img usemap="#product-map"> 必须对应 <map name="product-map">，usemap 值带 #，name 值绝对不带 #。
立即学习“前端免费学习笔记（深入）”；
其他易错点：
- 大小写敏感：
"Product-Map"≠"product-map" - 空格/下划线/连字符差异：多一个空格或把
_写成-都会断连 -
<map>必须在<img>同一文档内，不能跨 iframe 或通过 JS 动态插入后才设usemap
调试时直接在控制台查：document.querySelector('img[usemap]').getAttribute('usemap') 和 document.querySelector('map').getAttribute('name')，肉眼比对值是否完全相等。
响应式页面里热区点不准，怎么办
<map> 的坐标是死的，只认原始图片尺寸。只要图片被 CSS 缩放（比如 width: 100%、max-width、transform: scale()），coords 就立刻偏移。
可行解只有两个，没有中间路线：
- 放弃响应式缩放，用
<img width="800" height="600">固定原生尺寸，再配合媒体查询切换不同分辨率的图 + 不同<map> - 换 SVG：把图片当
<image>嵌入 SVG，用<circle>/<rect>定义热区，天然支持缩放、无障碍、CSS 控制样式
别信“用 JS 算缩放比例重设 coords”的方案——图片加载时机、clientWidth 获取精度、字体渲染抖动都会让计算结果漂移，真机上尤其不稳定。
移动端点不中，最小热区怎么设
触控设备物理精度有限，Apple 和 Google 都明确要求可点击区域 ≥ 44×44px。这不是建议，是实际体验底线。
对应到 <area>：
-
rect：确保x2 − x1 ≥ 44且y2 − y1 ≥ 44 -
circle：半径r ≥ 22（因为直径要 ≥ 44） -
poly：包围盒（bounding box）宽高均 ≥ 44，否则边缘点容易误判
务必在真机上测试，模拟器的触控采样逻辑和真实手指完全不同。热区在桌面端看着准，手机上点三次才中一次，等于没做。
