usemap 和 map 的 name 必须逐字节一致，且 usemap 值以 # 开头；coords 格式须严格匹配 shape 类型；area 必须嵌套在 map 内、含 href 和 alt；响应式下需 js 动态重算 coords。
usemap 和 map 的 name 必须逐字节一致
热区不响应、鼠标悬停没手型、控制台无报错？90% 是因为 usemap 和 <map name></map> 没对上。浏览器不报错，只静默忽略整个映射。
必须严格满足：
-
usemap值必须以#开头，比如usemap="#floor-plan" -
<map name="floor-plan"></map>的name值必须和#后面的字符串**完全相同**：大小写、连字符、空格都不能差 -
<map id="floor-plan"></map>❌ 无效 —— 浏览器只认name，不认id - 调试时别靠眼扫，复制
usemap值，再在 DOM 中搜索对应<map name="..."></map>，粘贴比对
coords 格式必须按 shape 类型精确填写
coords 不是“随便填的像素”，它由 shape 决定解析逻辑；填错一位，热区可能缩成一个点、偏到画布外，甚至覆盖整张图。
常见组合：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
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></svg>更稳妥 —— 矢量坐标天然适配缩放，无需手动换算
coords 填，没按原始图片尺寸换算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
