area标签必须嵌套在map内部，且img的usemap属性值须为“#”加map的name属性值；coords基于图片原始尺寸计算，缩放时需JS动态适配；href和alt为必需属性，推荐用addEventListener绑定点击事件并配合data-part传递语义信息。
area 标签必须嵌套在 map 内部，且 map 必须通过 usemap 关联到 img
直接写 area 但没包在 map 里，或者写了 map 却忘了给 img 加 usemap，点击事件完全不会触发。常见错误是把 usemap 写成 map 或漏掉开头的 #。
正确写法是：<img src="body.png" usemap="#body-map"><map name="body-map"><area shape="poly" coords="..." href="#"></map> —— 注意 usemap 值是 #body-map，而 map 的 name 是 body-map（不带 #）。
-
shape取值只能是rect、circle、poly或default；人体部位轮廓复杂，基本都用poly -
coords是一串逗号分隔的像素坐标点，顺序必须闭合（首尾点不需重复），例如120,80,135,60,150,80,140,110 -
href设为#或空字符串可避免跳转，但更推荐用javascript:void(0)配合事件监听
用 addEventListener 监听 area 点击，别依赖 onclick 属性
area 支持原生 onclick，但实际中容易因 DOM 加载顺序或动态插入导致绑定失败。直接用 JS 绑定更可控，也方便传参和复用逻辑。
关键点：必须等 map 和所有 area 渲染完成后再绑定，否则 querySelectorAll('area') 返回空数组。推荐用 DOMContentLoaded 或把脚本放页面底部。
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('area').forEach(area => {
area.addEventListener('click', function(e) {
e.preventDefault();
const part = this.dataset.part; // 比如 data-part="heart"
console.log('clicked:', part);
});
});
- 给每个
area加data-part="liver"这类自定义属性，比解析href或alt更可靠 - 不要在
area上写onclick="handleClick('head')"—— 内联函数难以调试，且与模块化代码冲突 - 移动端需额外加
touchstart事件，或设置cursor: pointer触发 iOS Safari 的点击识别
坐标系依赖图片原始尺寸，缩放后 coords 会失效
如果用 CSS 缩放 img（比如 width: 100%），area 的 coords 仍按原图像素计算，热点区域会严重偏移。这是最常被忽略的兼容性坑。
解决方法只有两个：要么保持图片原始宽高显示，要么用 JS 动态换算坐标。后者需要获取原图尺寸、当前显示尺寸、滚动偏移，再重映射所有 coords —— 实际项目中建议用现成库如 image-map-resizer 或改用 SVG。
- 检查方式：右键图片 → “在新标签页中打开图像”，看 URL 是否指向原始分辨率图片
- 如果必须响应式，优先考虑用
<svg>替代<img>+<map>，SVG 路径天然适配缩放 - Chrome DevTools 的 “Elements” 面板里选中
area，右侧 “Computed” 查看offsetTop/Left是否符合预期
IE 和旧版 Edge 不支持 area 上的 dataset 或部分事件冒泡
IE11 能识别 area 点击，但 event.target 可能是 img 而非 area，且 dataset 为空。这不是 bug，是 IE 对 area 的 DOM 实现限制。
兼容写法：监听 img 的点击，再用 document.elementFromPoint(x, y) 反查命中哪个 area；或者降级为服务端路由（href="/part/brain"）。
- 现代项目若无需支持 IE，可忽略此条；但医疗类系统常有老旧内网环境，务必提前确认
- 测试时在真实 IE11 或 BrowserStack 上点几次，看
console.log(e.target)输出什么 - 避免在
area上用class控制样式 —— IE 下area不支持伪类和大多数 CSS 属性
coords 后，一定要在目标设备上真机验证偏移——尤其 iPad Safari 和安卓微信内置浏览器，它们对 map 的解析略有差异。 
