area标签必须嵌套在具有name属性的map元素内，且img的usemap值需带#前缀匹配；coords按原始图片像素计算，不随CSS缩放变化；点击事件应结合href与onclick以保障可访问性。
area 标签必须嵌套在 map 内，且 map 必须有 name 属性
浏览器只认 map 元素的 name 属性，和 img 的 usemap 值匹配（注意：usemap 值要带 # 前缀）。漏掉 name 或写错大小写，热区直接失效。
常见错误现象：area 点击无响应，开发者工具里能看到元素但鼠标悬停不显示手型，控制台也无报错。
<map name="my-map"><area shape="rect" coords="0,0,100,100" href="#top"></map>-
<img src="plan.png" usemap="#my-map" alt="html实现map area图像热区_html map area图像热区点击映射【干货】" >—— 注意是#my-map，不是my-map - 不要把
area放到div或section里，它只合法存在于map中
coords 坐标系以图片左上角为原点，单位是像素
coords 的数值含义取决于 shape：
rect 是 x1,y1,x2,y2（左上 + 右下）；
circle 是 cx,cy,r（圆心 x、y 和半径）；
poly 是连续的 x,y 点序列，首尾不自动闭合，需手动重复第一个点或靠渲染引擎补全（但别依赖）。
容易踩的坑：用设计稿标注的「居中坐标」直接填 coords，结果热区偏移。必须按实际图片尺寸换算，且注意 CSS 缩放（width/height 设置）会让图片视觉变小，但 coords 仍按原始像素计算 —— 这时热区会错位。
- 原始图 800×600，你用
img { width: 400px; height: 300px; }显示，那coords还得填 800×600 下的值，不能除以 2 - 调试技巧：临时加
border: 1px solid red到img，再用浏览器开发者工具的「截图选区」比对坐标 -
poly示例：<area shape="poly" coords="10,10,50,10,50,50,10,50" href="/room1">（矩形）
点击跳转或触发 JS，优先用 href + onclick 组合而非只绑 JS
纯靠 onclick 处理点击，会丢失语义、键盘可访问性（如回车键无法触发），且右键「在新标签页打开」失效。正确做法是保留 href（哪怕只是 href="javascript:void(0)"），再用 onclick 做增强。
立即学习“前端免费学习笔记（深入）”；
如果要用 JS 完全接管（比如发请求、弹窗），记得 event.preventDefault() 阻止默认跳转，否则页面可能闪动或跳空地址。
- 推荐写法：
<area shape="rect" coords="0,0,100,100" href="#kitchen" onclick="showDetail('kitchen'); return false;"> - 现代写法（事件委托更优）：
document.querySelector('map').addEventListener('click', e => { if (e.target.tagName === 'AREA') { e.preventDefault(); handleAreaClick(e.target); } }); - 避免：
<area ... onclick="location.href='/kitchen'">—— 绕过浏览器导航机制，影响 history 和前进后退
移动端 click 延迟与 touch 事件兼容问题
老式 area 在 iOS Safari 和部分安卓 WebView 中，存在约 300ms 点击延迟，且 touchstart 不会冒泡到 area（它不是普通交互元素）。单纯加 cursor: pointer 或 touch-action: manipulation 无效。
真正有效的解法只有两个：一是用 fastclick 类库代理，二是放弃 area，改用绝对定位的透明 div 覆盖（配合 pointer-events: auto）。后者更可控，尤其当热区形状复杂或需动态更新时。
- 若坚持用
area，至少加<meta name="viewport" content="width=device-width, initial-scale=1">启用快速点击 - 测试重点：真机 Safari、微信内置浏览器、Chrome for Android —— 模拟器常表现正常，但真机出问题
- 热区重叠时，
area的 DOM 顺序决定点击捕获优先级（后写的覆盖先写的），这点和 z-index 无关
area 最难搞的从来不是语法，而是图片缩放、DPR（设备像素比）、以及设计师给的标注图和前端切的图尺寸不一致——这些细节一错，热区就全偏了。 
