usemap与map的name必须严格匹配且usemap带#前缀、map的name不带#；area必须嵌套在map内；coords格式须与shape一致且为英文逗号；图片缩放时coords需JS动态重算。
usemap 和 map 的 name 必须严格匹配
浏览器不会报错，但热区完全不响应，十有八九是这里错了。usemap 值必须带 # 前缀，而 <map> 的 name 属性值绝对不能带 # ——这是最常卡住的地方。
-
<img src="map.jpg" usemap="#region-map">→<map name="region-map">✅ -
<img usemap="region-map">（漏 #）→ 不生效 ❌ -
<map name="#region-map">（name 多 #）→ 不生效 ❌ - 大小写不一致，比如
usemap="#Region-Map"对应name="region-map"→ 不匹配 ❌
area 标签必须嵌套在 map 内部
<area> 不是独立元素，它没有语义、不被识别、不触发任何行为，除非它出现在 <map> 开始和结束标签之间。常见错误是把它丢在 <map> 外面，或者放在 <body> 任意位置。
- ✅ 正确：
<map name="product"><area shape="rect" coords="10,20,100,80" href="/headphone"></map> - ❌ 错误：
<map name="product"></map><area ...>（游离在外） - ❌ 错误：
<area>放在<div>里，没包进<map>
coords 格式必须与 shape 一一对应
shape 决定了 coords 应该有几个数、每个数代表什么。写错一个，整个区域就偏移或消失，浏览器静默忽略，也不提示。
-
shape="rect"→ 4 个值：left,top,right,bottom，如coords="10,20,100,80" -
shape="circle"→ 3 个值：centerX,centerY,radius，如coords="150,60,30" -
shape="poly"→ 偶数个值，按顺序列出所有顶点x,y，如coords="200,10,250,30,230,90"（3 点 → 6 个数字） - 逗号必须是英文半角，禁止空格：
coords="10, 20, 100, 80"会失效
图片缩放后热区错位？coords 不自动适配
coords 基于图片原始像素尺寸（img.naturalWidth/naturalHeight），CSS 改变显示宽高（比如 width: 100%）后，热区立刻偏移——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：给
<img>加固定width和height属性，与原始尺寸一致，禁用 CSS 缩放 - 响应式方案：监听
img.onload和window.resize，用 JS 计算缩放比scaleX = img.offsetWidth / img.naturalWidth，再遍历所有<area>，拆开coords字符串、转数字、乘缩放比、拼回去赋值给area.coords - 别用
getBoundingClientRect()反推坐标——受transform、margin干扰，结果不可靠
