多边形热区需用<area shape="poly">，coords须为至少三组严格交替的x,y像素坐标（如"80,60,110,40,140,60"），不可混用百分比、不可超出原图尺寸；usemap与map name必须完全一致且同文档；响应式下应改用固定宽高图片+多分辨率适配或迁移到SVG；移动端最小外接矩形须≥44×44px。
area poly 坐标怎么写才有效
多边形热区必须用 <area shape="poly">，coords 值是一串严格交替的 x,y 坐标对，至少三组（6个数字），例如 coords="80,60,110,40,140,60"。浏览器按顺序连线，自动闭合首尾——你不用重复写第一个点。
常见错误包括：
-
coords少于 6 个数字（比如只写"100,200,300"），浏览器直接忽略该<area> - 坐标单位混用：百分比和像素不能混在同一个
coords里，"50%,20,100,80%"会失效 - 坐标超出原始图片尺寸：比如原图是 400×300，却写了
"500,200,520,250,480,280"，区域不可见也不响应点击
usemap 和 map name 怎么配才不静默失效
这是最常被忽略的断连点：<img usemap="#product-map"> 中的 #product-map 必须和 <map name="product-map"> 的 name 完全一致——不含多余空格、大小写敏感、不带 # 符号。
错配后果不是报错，而是整个热区「静默失效」：鼠标悬停没手型，点击无反应，DevTools 也查不到事件绑定痕迹。
立即学习“前端免费学习笔记（深入）”；
检查要点：
- 确认
<map>在 DOM 中位于<img>后面或同级（不能嵌套在<img>内） - 确保两者在同一个 HTML 文档内（iframe 或 shadow DOM 中需额外处理）
- 避免用 JavaScript 动态插入
<map>后忘记触发浏览器重解析（通常需等img加载完成后再挂载）
响应式下 poly 热区偏移，怎么稳住
只要图片用了 width: 100%、max-width 或任何 CSS 缩放，<area shape="poly"> 的像素坐标就会立刻失准——因为 coords 永远基于原始图片尺寸（如 800×600），不是渲染后尺寸。
可行解只有两个，没有中间路线：
- 放弃 CSS 缩放，改用
<img width="800" height="600">固定原生尺寸，再配合媒体查询切换不同分辨率图片 + 对应的<map> - 迁移到 SVG：
<svg>内嵌<image>，用<polygon points="...">定义热区，天然适配缩放和高 DPI
JavaScript 动态重算 coords 虽然可行，但需监听 resize、load、orientationchange，还要处理 DPR 变化，维护成本极高，不建议手动实现。
移动端 poly 点不中，最小尺寸怎么设
多边形顶点再多，只要包围盒太小，手指就点不中。Apple 和 Google 都明确要求：可触控区域物理尺寸 ≥ 44×44px。
这意味着你得检查 poly 包围的**最小外接矩形**（不是视觉轮廓）：
- 算出所有
coords中的 min-x / max-x / min-y / max-y - 确保
max-x − min-x ≥ 44且max-y − min-y ≥ 44 - 真机测试比模拟器更可靠；尤其注意 iOS Safari 下
pointer-events对<area>的兼容性略弱
别只盯着桌面端坐标准不准——热区在 iPhone 上点三次才中一次，等于没做。
