图片热点点不中是因为coords坐标基于图片原始像素尺寸，而CSS缩放（如width:100%）未同步缩放coords，导致热区漂移；shape与coords格式错误、移动端热区小于44×44px、未适配响应式也是主因。
为什么图片热点点不中？坐标系和缩放是核心矛盾
图片热点失效，90% 以上是因为 coords 坐标基于原始像素尺寸，而你用了 width: 100% 或 max-width 缩放图片。浏览器不会自动按比例换算 coords，导致热区“漂移”。这不是代码写错，是坐标系被 CSS 打乱了。
必须明确：<map></map> 和 <area> 是纯 HTML 原生方案，不感知 CSS 变形、缩放、transform，只认图片原始宽高（即 img 的 width 和 height 属性值，或文件真实分辨率）。
怎么写对 shape 和 coords 才不偏移
填错参数个数或顺序，热点直接消失或错位。每个 shape 对应唯一格式，大小写敏感，且不能有空格或多余逗号：
-
shape="rect"→ 必须且仅 4 个值：coords="x1,y1,x2,y2"（左上角 + 右下角，x2 > x1，y2 > y1） -
shape="circle"→ 必须且仅 3 个值：coords="cx,cy,r"（圆心 x、y + 半径 r，r > 0） -
shape="poly"→ 值必须成对出现、总数为偶数：coords="x1,y1,x2,y2,x3,y3,x4,y4"（顺时针或逆时针闭合多边形）
所有坐标都从图片左上角（0,0）起算，单位是像素——不是 rem、em、%，也不是缩放后的视觉像素。
立即学习“前端免费学习笔记（深入）”；
移动端热区太小点不中，怎么设才可靠
触控设备对小区域极其不友好。Apple 和 Google 的无障碍规范明确要求：可点击区域最小物理尺寸 ≥ 44×44px。这意味着：
- 圆形热区：
coords="x,y,22"（半径至少 22，直径 ≥ 44） - 矩形热区：
x2−x1 ≥ 44且y2−y1 ≥ 44，例如coords="100,50,144,94" - 别信模拟器点击效果，必须在真机 Safari / Chrome 上用手指实测
很多“桌面能点中、手机点不中”的问题，根源就是热区尺寸没达标，而非坐标不准。
响应式页面里怎么让热点不随缩放失效
纯 HTML <map></map> 没有响应式能力。可行路径只有两条，没有第三条：
- 放弃 CSS 缩放，改用
<img style="max-width:90%" style="max-width:90%" alt="如何使用HTML限制图片热点的可点击区域" >固定尺寸，再配合媒体查询切换不同分辨率图片 + 对应<map></map>（适合图片尺寸有限、断点明确的场景） - 彻底迁移到 SVG：
<svg><image href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></image><circle cx="100" cy="80" r="22" onclick="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></circle></svg>，SVG 元素天然跟随容器缩放，coords 自动适配
手动用 JavaScript 动态重算 coords 比例虽可行，但需监听 resize、处理 DPR、兼容图片加载时机，维护成本极高，除非已集成 image-map-resizer 这类成熟库，否则不建议碰。
