area点击优先级由DOM顺序决定，先写的area优先响应；poly需手动闭合coords；usemap与map name必须严格匹配；coords以原图像素为单位，缩放会导致偏移。
area标签的点击优先级由DOM顺序决定
多个 area 重叠时，**谁在 <map> 里写在前面，谁就优先响应点击**。浏览器不会按坐标面积、z-index 或绘制顺序判断，只看 HTML 中的出现顺序——后写的会盖住先写的“视觉上”，但点击事件仍交给第一个命中且可交互的 area。
常见错误现象：明明画了一个小圆在大矩形上面，点击圆却跳转到矩形链接。原因就是 area 圆写在了矩形后面，而矩形先匹配到了鼠标坐标，直接拦截了事件。
- 实操建议：把小区域、高优先级热区（如按钮、操作入口）放在
<map>内部靠前位置 - 避免用 CSS 的
z-index或position试图调整热区层级——area是空元素，不参与 CSS 布局流，这些样式完全无效 - 调试方法：临时删掉部分
area，逐个验证是否命中预期链接，快速定位遮挡关系
shape="poly" 的 coords 必须手动闭合，否则区域不完整
poly 形状不会自动连接首尾点，coords="10,20,30,40,50,60" 只生成两条线段（10,20→30,40→50,60），不是三角形。用户点击内部几乎不会触发，因为浏览器判定该区域“未封闭”，不构成有效热区。
正确写法必须重复第一个点： coords="10,20,30,40,50,60,10,20"。
立即学习“前端免费学习笔记（深入）”；
- shape="rect" 和 "circle" 没这个问题，它们天生闭合
- poly 至少需要 6 个数字（3 个点），少于 6 个会被忽略或退化为
rect行为 - 用图像编辑器导出 coords 时注意检查是否含首尾重复；手写务必自己补全
usemap 关联失败导致所有 area 点击无响应
90% 的“area 不点击”问题，根源不是 area 本身，而是 <img usemap="#xxx"> 和 <map name="xxx"> 没对上。浏览器严格区分大小写、空格、连字符和 # 符号，错一个字就断连。
-
usemap值必须带#前缀，写成usemap="nav-map"或usemap="#Nav-Map"都无效 -
<map>必须在<body>内，不能放在<head>、注释中、或被<div>包裹 - 推荐写法：
<map id="product-map" name="product-map">+<img usemap="#product-map">，兼顾 HTML4/5 兼容性 - 验证方式：Chrome 中右键图片 → “检查”，若不能高亮对应
<map>节点，说明关联失败
图片缩放后 coords 偏移，纯 HTML/CSS 无法修复
coords 永远以原图像素为单位计算。一张 1200×800 的图用 CSS 缩放到 600×400 显示，coords="0,0,100,100" 仍指原始左上角 100×100 区域——现在它只占屏幕 50×50 像素，点起来必然偏移。
- 没有
viewport或transform能让 coords 自动适配缩放 - 两个真实可行解：① 禁用缩放，用
width/height固定为原图尺寸，靠外层容器控制显示大小（可能拉伸）；② 用 JS 动态重算：监听load和resize，根据img.naturalWidth / img.offsetWidth比例批量修正每个area的coords属性 - 别指望
background-size: contain或object-fit能帮上忙——它们不影响area坐标系
真正容易被忽略的是：area 的点击行为依赖浏览器对图像映射的底层解析，一旦 usemap 断连、coords 格式错、或 DOM 顺序混乱，它不会报错，只是静默失效。排查时得从关联链最上游开始，而不是盯着 area 本身改来改去。
