area标签必须嵌套在map元素内并绑定img的usemap属性才生效；coords基于原图像素，CSS缩放会导致热区偏移；推荐保持原尺寸或改用SVG；不支持原生click事件，需用href配合JS模拟。
area 标签必须嵌套在 map 内，且需绑定 img 的 usemap
单独写 <area> 不会生效——它不是独立可点击元素，而是图像映射（image map）的坐标定义工具。常见错误是把 area 当成普通按钮或链接直接扔进页面，结果点击完全无响应。
正确结构只有这一种：img 通过 usemap="#car-map" 指向一个 map 元素，而 area 必须作为该 map 的子元素存在：
<img src="car-outline.png" usemap="#car-map" alt="汽车结构图"> <map name="car-map"> <area shape="poly" coords="120,80,150,60,180,80,160,110" href="#engine" alt="发动机"> <area shape="rect" coords="200,130,280,170" href="#door" alt="车门"> </map>
注意：name 和 usemap 的值必须一致（开头不加 #，但 usemap 属性值要带 #），这是最常配错的地方。
coords 坐标必须基于原图像素，缩放后会失效
如果你用 CSS 缩放了 img（比如 width: 100%; height: auto），area 的 coords 依然按原始图片分辨率计算，热区会严重偏移。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
可行方案只有两个：
- 保持图片原始尺寸显示（推荐用于结构图这类需要精准定位的场景）
- 改用 SVG 替代：把汽车结构图转为 SVG，用
<path>+onclick或<a>包裹路径，天然支持响应式和事件监听
别试图用 JS 动态重算 coords——不同设备 DPR、缩放比例、滚动位置都会干扰，维护成本极高。
area 不支持原生 click 事件监听，只能靠 href 或 JS 模拟
area 上绑定 onclick 属性或用 addEventListener('click', ...) 在部分浏览器（尤其是旧版 Safari 和 IE）中不可靠。官方规范只保证 href 跳转和 alt 提示。
如果需要弹窗详解、埋点统计或阻止跳转，得绕一下：
- 给
area设置href="javascript:void(0)"，再用 JS 绑定事件（注意加上preventDefault()） - 用
data-target="#engine-modal"存标识，统一由 JS 读取并触发对应逻辑 - 避免在
area上写内联 JS（如onclick="showDetail('engine')"），不利于维护和 CSP 策略
另外，alt 属性不能省——不仅是无障碍要求，iOS Safari 在长按时会把它当作提示文案显示。
多边形区域（shape="poly"）的 coords 顺序影响热区方向
画发动机舱、底盘轮廓这类不规则部件时，shape="poly" 是主力，但 coords 列表必须按顺时针或逆时针闭合（首尾点不必重复）。如果点序混乱，某些浏览器可能渲染出“洞”或反向遮罩。
实操建议：
- 用在线工具（如 Image Map Resizer）导出坐标，别手算
- 测试时打开浏览器开发者工具，勾选“Show all
areaoverlays”（Chrome DevTools > Rendering > Show area elements）直观查看热区是否覆盖准确 - 避免单个
area跨越镜像对称部件（如左右大灯），宁可拆成两个area，否则坐标易出错且语义不清
真正麻烦的不是写 area，而是当设计稿更新、图片重切、部件微调时，所有 coords 都得重新校准——这点比 SVG 或 Canvas 方案痛苦得多。
