area坐标重叠时后声明的区域覆盖前一个，点击总触发最后一个href；需检查coords有效性、响应式缩放导致的视觉错位、usemap唯一性及area缺失shape/alt等问题。
area标签坐标重叠导致点击失效
图像映射（<map></map> + <area>）本身不报错，但多个<area>区域坐标范围重叠时，后声明的<area>会覆盖前一个——用户点击重叠区，永远触发最后一个匹配的href。这不是bug，是规范定义的行为（按源码顺序，从上到下匹配第一个命中区域）。
排查方法很简单：打开开发者工具 Elements 面板，展开<map></map>，逐个选中<area>，看右侧“Computed”里offsetLeft/offsetTop和offsetWidth/offsetHeight是否明显交叠；更直接的是在 Console 运行：document.elementFromPoint(x, y)，把x/y换成你怀疑重叠点的坐标，反复试几个位置，看返回的<area>是不是总同一个。
- rect类型：检查
coords="x1,y1,x2,y2"是否出现x1 >= x2或y1 >= y2（坐标反向会导致区域无效或翻转） - poly类型：确认顶点数为偶数，且每对
x,y严格交替，如coords="0,0,100,0,100,50"缺了一个y就让后续全部偏移 - circle类型：
coords="cx,cy,r"中r必须为正整数，负值或0会让区域消失，看似“没重叠”，实则漏检测
响应式下area坐标失准引发视觉重叠
原生<area>坐标基于图片原始尺寸（如800×600），一旦图片用width: 100%或max-width缩放，热区就不再对齐——此时多个<area>在视觉上挤在一起，甚至部分区域完全错位覆盖，但DOM里坐标没变，调试器看不出问题。
临时验证：给<img alt="HTML怎么检测映射区域重叠冲突" >加 style="max-width:90%"并强制设为原始宽高（如width: 800px; height: 600px;），如果重叠消失，基本锁定是缩放导致的坐标漂移。
立即学习“前端免费学习笔记（深入）”；
- 不要手动重算所有
coords——维护成本高且易出错 - 优先改用
<svg></svg>替代：<image></image>配合<rect></rect>/<circle></circle>天然支持百分比和viewBox缩放 - 若必须用
<map></map>，引入rwd-image-maps这类库，在resize事件里调用$(‘img[usemap]’).rwdImageMaps()自动重映射
同一张图多个usemap指向不同map造成区域错乱
HTML允许一张<img alt="HTML怎么检测映射区域重叠冲突" >通过usemap="#map1"绑定一个<map></map>，但若同时写usemap="#map1 #map2"（空格分隔）或重复写usemap属性，浏览器只取第一个有效值，其余被忽略。此时如果#map1和#map2定义了相同坐标的<area>，而你误以为两者共存，就会产生“为什么点了这里却跳去别处”的错觉。
检查方法：在 Elements 面板里右键<img alt="HTML怎么检测映射区域重叠冲突" > → “Edit as HTML”，确认usemap属性只有一个且值正确；再搜索页面中所有<map name="xxx"></map>，确保name不重复，且每个name只被一处usemap引用。
-
<map></map>的name区分大小写，#header-map和#Header-Map是两个不同map - 避免在CSS-in-JS或模板字符串里动态拼接
usemap，容易漏掉#或引号，导致绑定失败，退化为无映射状态 - 服务端渲染时注意
<map></map>是否被提前闭合（如<map name="a"></map><map name="b"></map>中间没内容，某些解析器会吞掉第二个<map></map>）
area标签缺少alt或shape导致隐性冲突
<area>不是必须有href，但若漏写shape（默认为rect）或coords，浏览器仍会尝试渲染一个0×0区域——它占据DOM位置，但不可见、不可点。当多个这样的“空区域”堆在左上角（坐标默认为0,0,0,0），它们就在视觉和逻辑上形成重叠，且无法通过常规高亮发现。
最稳妥的检查方式：在 Console 执行以下代码，它会列出所有<area>及其关键属性，并标出异常项：
Array.from(document.querySelectorAll('area')).map((a, i) => ({
index: i,
shape: a.shape || 'rect',
coords: a.coords,
href: a.href,
hasCoords: !!a.coords && a.coords.split(',').length >= 2,
isEmpty: !a.coords || a.coords.split(',').some(c => isNaN(+c))
}));
- 输出中
isEmpty: true的<area>要立刻修正或删除 -
shape="default"虽合法，但会覆盖整张图，极易与其他区域冲突，除非明确需要“全图兜底”，否则禁用 - 即使不考虑可访问性，也必须为每个
<area>提供alt——缺失alt不会引起重叠，但会使屏幕阅读器把所有空区域读作“链接”，干扰用户，间接增加误操作概率
