usemap 与 map name 必须逐字节一致，大小写、#号、连字符、空格均影响匹配；coords 坐标须基于原始尺寸并严格按 shape 格式书写；响应式下需 JS 动态重算缩放比例；area 必含 href 和 alt 才具备语义与兼容性。
usemap 与 map name 必须逐字节一致
热区点击无响应，90% 是因为 usemap 和 <map name></map> 没对上。浏览器只做严格字符串匹配，大小写、#号、连字符、空格全算在内。
常见错误：
-
usemap="product-map"❌ 缺少#，整个映射被忽略 -
usemap="#Product-Map"❌ 大小写不一致，<map name="product-map"></map>就断连 -
<map id="product-map"></map>❌usemap只认name，不认id
调试时别靠眼睛扫——右键图片 → “检查”，复制 usemap 值；再选中 <map></map> 元素，复制其 name 属性；用编辑器做纯文本比对（推荐 VS Code 的“选择性粘贴→仅文本”+ 差异对比）。
coords 坐标必须基于原始尺寸，且格式严丝合缝
coords 不是“像素列表”，而是由 shape 决定的结构化数据。填错格式，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
格式规则：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，Safari 会静默跳过格式错误的poly
设计稿里标出的“居中坐标”不能直接填；必须按原始图片尺寸换算。导出坐标时注意清理空格和换行——coords 中只允许数字和逗号。
响应式下 coords 必须 JS 动态重算，不能靠 CSS 自适应
coords 永远绑定图片的 naturalWidth/naturalHeight，不是 CSS 渲染后的宽高。只要图片被缩放（max-width: 100%、width: 50%、object-fit），热区立刻失准。
动态重算三步关键：
- 等图片加载完成再读
img.naturalWidth和img.naturalHeight，否则值为0；监听img.addEventListener('load', updateCoords) - 用
img.offsetWidth / img.naturalWidth和img.offsetHeight / img.naturalHeight分别计算scaleX和scaleY（x/y 方向独立缩放） - 遍历所有
area，按shape类型分别处理：rect缩放全部 4 个值，circle缩放圆心 + 半径，poly逐对缩放x/y，结果取整后重新赋值给area.coords
必须同时监听 window.addEventListener('resize', updateCoords) 和 img.addEventListener('load', updateCoords)；更精准可用 ResizeObserver 替代 window.resize。
area 标签必须含 href 和 alt，否则语义与兼容性双崩
缺 href，点击无跳转行为；缺 alt，不仅屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该 area。
实操底线：
-
href可设为"#"或"javascript:void(0)"，但若绑了onclick，必须显式return false或event.preventDefault()阻止默认跳转 -
alt不是可选描述，是语义必需项，例如alt="点击进入华东地区详情" -
area必须嵌套在<map></map>内，单独写在外部会被浏览器忽略
真正可靠的方案不是死磕 map+area，而是复杂热区直接上 SVG：<image></image> + <path></path> 天然适配缩放，坐标系稳定，支持贝塞尔曲线和动画——map 只适合简单矩形/圆形/多边形，且你得接受它是个“写错一个字符就全失效”的精密机制。
