原生 <map>+<area> 热区失效主因是 usemap 与 <map name> 字符串不完全匹配、coords 格式错误、响应式缩放未动态重算坐标，且 <area> 必须嵌套于 <map> 内并含 href 和 alt。
原生 <map> + <area> 能实现图像局部热区，但只要漏掉一个 #、坐标格式错一位、alt 缺失，热区就静默失效——浏览器不报错，只让你反复点不动。
usemap="#name" 和 <map name="name"> 必须逐字节匹配
这是 90% 失效案例的根源。浏览器只认 usemap 值以 # 开头，且后面字符串必须和 <map name="..."> 的 name 属性**完全一致**（大小写、连字符、空格都算）。
-
usemap="#product-map"✅ 必须配<map name="product-map"> -
usemap="product-map"❌ 漏#，整个映射被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map">❌usemap不认id，只认name
<area> 的 shape 和 coords 格式不能混用
coords 不是“随便填的像素”，而是由 shape 决定的固定结构；填错会导致热区缩成一点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心x/y+ 半径r，r必须为正整数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾点需手动重复闭合（如"10,20,40,30,35,80,10,20"） - 别用
shape="default"做兜底——它会捕获所有未被其他<area>覆盖的点击，干扰调试
响应式页面里热区一定会错位，这不是 bug 是机制限制
<area> 的 coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100% 或 width: 50%），热区立刻偏移。
- 原图 1200×800，
coords="0,0,100,100"是左上角 100×100 区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控推荐最小尺寸 44×44px - 纯 HTML/CSS 无自动适配能力；唯一可靠解法是 JS 动态重算：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth与当前img.offsetWidth得到缩放比，再遍历所有<area>，把每个coords数值乘以对应比例后重新赋值 - 若项目已重度响应式，建议直接改用
<svg>矢量热区，天然支持缩放与百分比坐标
<area> 必须嵌套在 <map> 内，且 href 和 alt 不可省略
<area> 是空元素，不能自闭合（<area /> 是错的），且必须作为子节点**直接出现在 <map> 内部**；放在 <div> 里、或写在 <map> 外，所有浏览器都会忽略它。
- 缺少
href，点击无跳转行为；即使你后续用 JS 拦截，也应保留href="#"或href="javascript:void(0)" - 缺少
alt，不仅影响无障碍访问（屏幕阅读器无法读出功能），部分旧版 Safari 会直接忽略该<area> -
<map>必须在文档流中，不能被display: none、remove()或放在<head>里
真正容易被忽略的，是坐标系与渲染尺寸的割裂——你调好 coords 的那一刻，其实已经锁死了它只在原始分辨率下有效。任何缩放、DPR 变化、object-fit 裁剪，都会让热区“漂移”。这不是配置问题，是原生机制的硬边界。
