原生图像映射必须用 <map>+<area>，usemap 与 map[name] 必须严格匹配（含大小写、符号），usemap 值带 # 前缀而 name 不带；coords 格式按 shape 类型正确书写，无单位、无空格；CSS 缩放会导致热区偏移，需固定宽高或 JS 动态重算坐标；仅执行 JS 时禁用 href，务必添加 alt 保障可访问性。
原生方案只有 <map> + <area>，其他方式（CSS 覆盖、JS 坐标判断）要么语义错误，要么体验差、维护难。
usemap 和 map 的 name 必须严格匹配
这是最常失效的原因：浏览器不报错，但点击完全没反应。
-
<img usemap="#product-map">中的#product-map必须和<map name="product-map">的name完全一致（大小写、连字符、下划线都不能错） -
usemap值必须带#前缀；<map>的name绝对不能带# - 多个热区共用一张图时，所有
<area>都要放在同一个<map>内，不能拆开
shape 和 coords 格式不能写错
浏览器对 coords 字符串零校验——填错就静默失效，连控制台警告都没有。
-
shape="rect"→coords="10,20,100,80"（左上 x,y + 右下 x,y），不是宽高 -
shape="circle"→coords="150,60,30"（圆心 x,y + 半径） -
shape="poly"→coords="200,10,250,30,230,90"（顶点 x,y 顺序列出，偶数个值） - 所有数字用英文逗号分隔，禁止空格；
coords里不能出现单位（如 px）
图片缩放后热区偏移？coords 不自动适配
原生 <map> 的坐标基于图片原始像素尺寸（img.naturalWidth / img.naturalHeight），CSS 缩放（width: 100%、max-width）会让热区严重错位。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：给
<img>写死width和height属性，与原始尺寸一致，并禁用 CSS 缩放 - 响应式场景建议绕过
<map>，改用background-image+position: absolute的<div>热区，配合aspect-ratio或padding-top保比例 - 若坚持用
<map>，需 JS 动态重算：scale = img.offsetWidth / img.naturalWidth，再遍历每个<area>的coords字符串，拆分、转数字、乘缩放比、拼回
想执行 JS 而非跳转？别混用 href 和 onclick
<area> 支持 href（触发跳转）和原生 click 事件，但二者逻辑冲突。
- 如果只执行 JS（比如弹窗、上报、切换内容），就**不要写
href**，直接监听click并event.preventDefault() - 写了
href又绑onclick，部分浏览器会优先跳转，JS 执行不可靠 - 每个
<area>必须加alt，否则屏幕阅读器无法识别该区域功能
真正麻烦的从来不是写几行 <area>，而是坐标怎么量准、缩放怎么对齐、多端怎么保持热区大小不低于 44×44px —— 这些细节不处理，上线后用户点不到，你却查不出错在哪。
