area坐标必须按原始图片像素填写，不随css缩放变化；poly需手动闭合首尾点；usemap与map name须严格一致且大小写敏感；响应式下需js动态重算或改用svg。
area 坐标必须按原始图片像素填写，不随 CSS 缩放变化
你看到的图片变小了，coords 依然要填原始尺寸下的数值。比如原图是 800×600，你用 img { width: 400px; height: 300px; } 显示，那 coords 还得写 0,0,800,600，不能除以 2。否则热区会严重偏移，鼠标悬停无反应，点击也无效。
- 调试时临时加
border: 1px solid red到img，再用浏览器开发者工具的「截图选区」比对坐标位置 - 设计稿给的「居中坐标」不能直接抄，必须换算回原始图片左上角为原点的像素值
- 如果用了
object-fit或background-size，area完全失效——图像映射只认<img>的原始尺寸和coords
poly 区域首尾点必须手动闭合，不能依赖渲染引擎
poly 的 coords 是一串连续的 x,y 点，浏览器不会自动把最后一个点连回第一个点。如果你写 coords="10,10,50,10,50,50"，它只画出两条线段，不是三角形。
- 正确写法是显式重复起点：
coords="10,10,50,10,50,50,10,10" - 点太多时容易数错，建议用数组存顶点，拼接前校验
points[0]是否等于points[points.length - 2] - 不要用设计软件导出的“SVG path”直接转
coords，路径指令（如M L Z）和像素坐标系不是一回事
usemap 的 # 前缀漏掉或大小写不匹配，热区直接消失
<img usemap="#myMap"> 和 <map name="myMap"></map> 必须严格一致：usemap 值带 #，name 值不带；且大小写敏感。写成 usemap="#mymap" + name="myMap" 就会断连。
- 浏览器开发者工具里能看到
area元素，但鼠标悬停不显示手型、onclick不触发，大概率是这个原因 -
area只能放在<map></map>内部，放到<div> 或 <code><section></section>里会被忽略，控制台也不报错 - 多个
map共存时，确保每个name唯一，避免意外复用 - 简单方案：用 JavaScript 库如
rwd-image-maps，在 resize 时按比例重设所有coords - 更稳方案：改用 SVG 替代，
<svg></svg>原生支持viewBox和相对坐标，缩放不丢精度 - 底线方案：放弃复杂热区，拆成多个小图 + 独立
<img>，用 CSS Grid/Flex 控制布局，交互走事件委托
响应式页面中 area 坐标无法自适应，必须动态重算
传统 <map></map> 是静态像素坐标，页面缩放、窗口调整、横竖屏切换都会让热区错位。这不是 bug，是设计限制。
真正难处理的不是写错坐标，而是以为坐标“写对了”就完事——原始尺寸、CSS 干预、响应式行为、嵌套容器 margin/padding，每层都可能悄悄偏移几像素。动手前先用 getBoundingClientRect() 打印图片真实尺寸，再比对 coords 范围，比猜靠谱得多。
