usemap与map的name必须逐字节严格匹配，漏#、大小写错或空格差异均导致90%热区失效；coords须按shape格式书写且基于原始像素，响应式需JS动态重算缩放比。
usemap 和 map 的 name 必须逐字节匹配
90% 的 area 点击无响应，根源就在这里。浏览器对 usemap 和 <map name=""></map> 做的是严格字符串比对：大小写、连字符、空格、#号一个都不能错。
-
usemap="#product-map"✅ 必须配<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个map被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map">❌usemap不认id，只认name
调试时别靠眼睛扫，右键图片 → “检查元素”，复制 usemap 值；再选中 map 元素，复制其 name 属性，用编辑器做纯文本比对。
coords 坐标必须按 shape 严格格式化
coords 不是“像素列表”，而是由 shape 决定的结构化数据。填错格式，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，Safari 会静默跳过格式错误的poly
导出坐标时注意清理空格和换行——coords 中只允许数字和逗号。Figma/Photoshop 导出后务必手动检查。
立即学习“前端免费学习笔记（深入）”；
area 热区在响应式页面里必然错位
coords 坐标永远绑定图片文件的 naturalWidth/naturalHeight，不是 CSS 渲染后的宽高。只要图片被缩放（max-width: 100%、width: 50%、object-fit），硬编码的 coords 就立刻失准。
- 原始图 1200×800，
coords="0,0,100,100"是左上角 100×100 区域 - 缩放到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控最小推荐尺寸 44×44px
- 没有纯 HTML/CSS 方案能自动适配；唯一可靠解法是 JS 动态重算
需监听 img.addEventListener('load', updateCoords) 和 window.addEventListener('resize', updateCoords)，在 updateCoords() 中读取 img.naturalWidth 与 img.offsetWidth 得到缩放比，再遍历所有 area，把每个 coords 数值乘以比例后重新赋值。
移动端 poly 热区响应迟钝或失效
iOS Safari 对小面积 poly 热点响应迟钝，尤其当顶点密集、区域狭长或最小宽度/高度
- 建议 poly 区域最小渲染尺寸 ≥ 44×44px（按当前缩放后尺寸计算）
- 加
style="touch-action: manipulation"到img上，减少延迟 - 若
img在<picture>或<figure>内，确保map与其同级且未被 Shadow DOM 隔离——外部map在 Shadow DOM 里默认不可见
最易被忽略的是：map 标签不能嵌套，且必须与 img 在同一 DOM 上下文；哪怕只是多了一层 <div class="wrapper"> 把两者包住，只要没破坏层级关系，仍可工作；但一旦进 Shadow DOM，就得把 map 也放进 shadowRoot 里。
