<map>+<area>是唯一原生支持单图多链接的方案，但需usemap与map name逐字节匹配、coords基于原始尺寸、每个area必含href和alt，否则静默失效。
直接用 <map> + <area> 就能做，但必须确保 usemap 与 <map name> 逐字节匹配、coords 基于原始图片尺寸、每个 <area> 都带 href 和 alt，否则点击完全没反应——浏览器不报错，只静默忽略。
usemap="#xxx" 和 map name="xxx" 怎么配才不失效
这是最常卡住的地方：大小写、连字符、空格、#号缺一不可。浏览器做的是纯字符串比对，不是模糊匹配。
-
usemap="#product-map"✅ 必须对应<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个<map>被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map">❌usemap不认id，只认name
调试时别靠眼睛扫，右键图片 → “检查”，复制 usemap 值；再点开 <map> 元素，复制其 name 属性，用编辑器做纯文本比对。
coords 怎么填才不会偏移或消失
coords 不是“随便填的像素”，它由 shape 类型决定解析逻辑。填错一位，热区可能缩成一个点、跑到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点坐标成对出现，总数必须是偶数；首尾点建议手动重复闭合，别依赖浏览器自动补线
导出坐标时务必清理空格和换行："100, 50" 中的空格会导致 Safari 静默跳过该区域；设计稿里标出的“居中坐标”不能直接填，必须按原始图片尺寸换算。
响应式页面里热区为什么总点不准
coords 永远绑定图片文件的 naturalWidth/naturalHeight，不是 CSS 渲染后的宽高。只要图片被缩放（比如 max-width: 100%、width: 50%、object-fit），热区立刻失准。
- 原始图是
1200×800，coords="0,0,100,100"是左上角100×100区域 - 缩放到
375px宽后，该区域在屏幕上仅约31×21px，远低于触控推荐最小尺寸44×44px - 没有纯 HTML/CSS 方案能自动适配；唯一可靠解法是 JS 动态重算
监听 img.addEventListener('load', updateCoords) 和 window.addEventListener('resize', updateCoords)，在 updateCoords() 中读取 img.naturalWidth 与 img.offsetWidth 得到缩放比，再遍历所有 <area>，按 shape 类型分别处理坐标值。
area 标签必须嵌套在 map 内且 href、alt 不可省略
<area> 是个空元素，不能自闭合（<area /> 是错的），且必须作为子节点**直接**出现在 <map> 内部；放在 <div> 里、或写在 <map> 外，所有浏览器都会忽略它。
- 缺
href，点击无跳转行为 - 缺
alt，屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该<area> - 不要用
shape="default"做兜底——它会捕获所有未被其他<area>覆盖的点击，干扰调试
真正麻烦的不是写代码，而是每次改图都要重新量坐标、每次加响应式都要补 JS 逻辑。如果热区形状复杂或频繁更新，直接用 SVG 替代更省事——它天然支持缩放、语义清晰、坐标可相对定义，还不依赖原始像素尺寸。
