<area>必须与<img>通过usemap严格绑定，因浏览器仅匹配usemap="#name"与<map name="name">，大小写敏感、#不可省略、name须唯一；<map>需置于<img>同级或之后；坐标基于原始尺寸，CSS缩放会导致热点偏移，推荐SVG替代或固定原始尺寸。
直接用 <map> + <area> 就能实现，但多个区域必须共用一张图、一个 <map>，不能“每个区域单独一套”。想让不同图片或不同逻辑组互不干扰，得靠结构隔离或坐标动态适配。
为什么<area>必须和<img>用usemap绑定
浏览器只认 usemap="#name" 和 <map name="name"> 的严格匹配。大小写敏感，#号不能漏，name 值不能重复——否则只有第一个生效。如果页面有两张图都用了 usemap="#m1"，而只定义了一个 <map name="m1">，第二张图的热点就完全没响应。
- 确保每张需要热点的图都有唯一
usemap值，比如usemap="#map-2024"、usemap="#map-products" -
<map>标签必须放在<img>后面（或同级），不能嵌在别的块里，否则部分旧浏览器会忽略 - 坐标系基于图片原始尺寸（不是 CSS 缩放后的尺寸），所以
width/height属性或 CSSmax-width会导致热点偏移
rect/circle/poly 的 coords 怎么填才不踩坑
rect 要两个点：左上角 x,y + 右下角 x,y；circle 是圆心 x,y + 半径 r；poly 是首尾闭合的点序列，x1,y1,x2,y2,...,xn,yn。所有值都是整数像素，逗号后不能有空格，顺序错一位整个区域就飞了。
- 用在线工具（如 ImageMap Generator）导出 coords，别手算——尤其 poly 区域，人眼对齐误差 >5px 就点不中
- 测试时关掉图片的
border和outline，避免视觉干扰判断点击位置 - 移动端需额外加
cursor: pointer到<img>，否则 iOS Safari 不显示手型，用户不知道可点
响应式下热点失效？别硬调 coords
用 CSS 缩放图片时，<area> 坐标不会跟着缩放，导致热点漂移。强行按比例重算 coords 不可靠，因为浏览器渲染存在 subpixel 偏差，且不同设备 DPR 不同。
立即学习“前端免费学习笔记（深入）”；
- 优先用 SVG 替代
<map>：SVG 的<path>或<rect>天然响应式，坐标是相对单位 - 如果必须用
<map>，就固定图片原始尺寸（不用 CSS 缩放），改用srcset+sizes提供多倍图 - 极端情况可用 JS 动态重设
<area>的coords，监听resize并按当前img.naturalWidth / img.clientWidth比例缩放，但注意防抖和首次加载时机
真正难的不是画几个区域，而是让它们在不同设备、不同缩放、不同图片尺寸下始终精准响应——<area> 的坐标是静态快照，它不理解“布局”，只认原始像素。所以结构隔离和尺寸控制，比写对 shape 更关键。
