<p>usemap 和 map 的 name 必须逐字节一致，且 usemap 值以 # 开头；coords 格式须严格匹配 shape 类型；area 必须嵌套在 map 内、含 href 和 alt；响应式下需 JS 动态重算 coords。</p>
usemap 和 map 的 name 必须逐字节一致
热区不响应、鼠标悬停没手型、控制台无报错？90% 是因为 usemap 和 <map name> 没对上。浏览器不报错，只静默忽略整个映射。
必须严格满足：
-
usemap值必须以#开头，比如usemap="#floor-plan" -
<map name="floor-plan">的name值必须和#后面的字符串**完全相同**：大小写、连字符、空格都不能差 -
<map id="floor-plan">❌ 无效 —— 浏览器只认name，不认id - 调试时别靠眼扫，复制
usemap值，再在 DOM 中搜索对应<map name="...">，粘贴比对
coords 格式必须按 shape 类型精确填写
coords 不是“随便填的像素”，它由 shape 决定解析逻辑；填错一位，热区可能缩成一个点、偏到画布外，甚至覆盖整张图。
常见组合：
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0，不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；Safari 对含空格或换行的 coords 会静默跳过 - 别用
shape="default"做兜底 —— 它会捕获所有未被其他area覆盖的点击，干扰调试
area 必须嵌套在 map 内，且 href 和 alt 不可省略
area 是空元素，不能自闭合（<area /> ❌），也**不能**放在 div、section 或 picture 里 —— 只合法存在于 map 直接子节点中。
两个属性是强制的：
-
href必须是有效 URL：./detail.html#speaker✅，javascript:void(0)✅，但href="#"或href="#section"❌（部分浏览器不兼容锚点跳转） -
alt不是“可选描述”，而是可访问性必需项：屏幕阅读器依赖它，Chrome 控制台会警告缺失，应准确说明功能，例如alt="点击进入卫生间详情页" - 移动端触控精度低，热区边缘建议留至少
10px间隙；iOS Safari 对小面积poly响应迟钝，最小尺寸建议 ≥44px
响应式页面中 coords 会错位，必须 JS 动态重算
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片用了 max-width: 100%、width: 50% 或在高 DPR 屏幕上渲染，热区立刻失准。
唯一可靠解法是 JS 动态重算：
- 监听
window.addEventListener('resize', updateCoords)和img.addEventListener('load', updateCoords) - 在
updateCoords()中计算缩放比：scaleX = img.offsetWidth / img.naturalWidth，同理得scaleY - 遍历所有
area元素，解析其coords字符串，将每个数值乘以对应方向缩放比，再赋回area.coords - 若项目重度响应式，或热区形状复杂，直接改用
<svg>更稳妥 —— 矢量坐标天然适配缩放，无需手动换算
coords 填，没按原始图片尺寸换算。 
