usemap 和 map name 必须严格匹配：usemap 带 #，name 不带；大小写、连字符、空格均需一致；coords 基于原始像素，缩放会导致错位；shape/coords 格式错误即失效；移动端热区物理尺寸须 ≥44×44px；务必设 alt 保障可访问性。
usemap 和 map name 必须逐字匹配，漏掉 # 就完全失效
浏览器对 usemap 和 <map name></map> 的匹配极其严格：前者必须带 # 前缀，后者绝对不能带；大小写、连字符、空格都必须一致。写成 usemap="nav-map" 或 <map name="Nav-Map"></map>，热区就静默失效——控制台不报错，点击也无反应。
实操建议：
- 复制粘贴时手动核对：选中
usemap="#floor-plan"，再点开<map></map>标签，确认name="floor-plan"（无#，全小写，无空格） - 命名只用小写字母、数字、短横线，避免下划线或中文
- 多个热图共存时，每个
usemap/name对必须唯一，不可复用 - 调试时右键图片 → “检查”，看
<img>是否渲染成功，且没被display: none或pointer-events: none遮挡
coords 坐标必须基于原始图片像素，缩放后会偏移
coords 是硬编码的像素值，以图片左上角为 (0, 0) 原点。只要 <img> 用了 width、max-width 或 CSS transform: scale()，热区就立刻错位——这不是 bug，是规范行为。
常见错误现象：桌面端点得准，手机上总差几厘米；开发者工具里看到区域框和图片对不上。
实操建议：
- 临时调试：给
<img>加style="max-width:90%"，截图比对坐标落点是否在目标边缘 - 固定尺寸方案：去掉所有 CSS 缩放，用
width和height属性设为原始尺寸（如width="1200" height="800"） - 响应式方案：监听
resize和img.onload，用img.naturalWidth / img.offsetWidth算缩放比，重写每个<area coords> - 更轻量替代：直接换 SVG，天然适配缩放，无需重算
shape 和 coords 格式错一个字符，热区就消失
shape="rect" 要 4 个整数：coords="x1,y1,x2,y2"（左上 + 右下），多空格、少逗号、写小数都会让整个 <area> 被忽略。同理，shape="circle" 要 3 个值（cx,cy,r），shape="poly" 必须偶数个值（每对 x,y），顶点顺序无所谓，但不能自相交。
实操建议：
- 别手敲坐标：用在线工具（如 image-map.net）或 VS Code 插件“Image Map”导出 coords 字符串
- 验证格式：复制 coords 到编辑器，用正则
/^\d+(,\d+)*$/检查是否全是逗号分隔的整数 - 多边形顶点超过 20 个时，旧版 Safari 可能截断或卡顿，优先拆成多个
<area> - 矩形热区慎用
shape="default"——它覆盖整图，无法和其他区域共存
移动端点不中？物理尺寸必须 ≥ 44×44px
设计稿里 16×16px 的图标热区，在 iPhone 上大概率点不中。Apple 和 Google 明确要求：可点击区域最小物理尺寸 ≥ 44×44px（设备独立像素经缩放后的实际显示尺寸），不是 CSS 像素，也不是原始图里的像素。
这意味着：一张 1200×800 的原图，若在手机上缩放到 300×200px 显示，那热区在原始图中的坐标范围，对应到屏幕上的物理面积必须够大。
实操建议：
- 计算原始图中所需最小像素：假设缩放比是 0.25（1200→300），那热区在原图中至少要占
44 / 0.25 = 176px宽高 - 别依赖 padding 扩展热区——
<area>不支持 padding，只能靠扩大 coords 范围 - 文字链接或小图标，改用
<button></button>+ background-image，确保总可触面积（含 padding/border）≥ 48×48px - 始终为
<area>设alt，否则屏幕阅读器跳过，WCAG 不达标
真正卡住人的，往往不是怎么写 <area>，而是坐标取自缩放后的截图、usemap 少了个 #、或者以为 poly 顶点要首尾重复。这些细节不校验，热区就永远“看起来在那儿，点不着”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
