关键在于usemap值必须以#开头且严格匹配map的name值（不含#），coords基于图片原始尺寸，area须含href和alt；响应式场景推荐用svg替代。
怎么让 <img> 和 <map></map> 正确关联
关键不是写对标签，而是 name 和 usemap 的值必须严格匹配，且 usemap 值要带 # 前缀，而 <map></map> 的 name 属性不能带。
常见错误是漏掉 #，比如 usemap="mymap" 对应 <map name="mymap"></map> —— 这在多数浏览器里会失效。正确写法是：
@@##@@ <map name="floor-map" id="floor-map"></map>
注意：为兼容旧浏览器（尤其 IE），<map></map> 最好同时设 id 和 name，值相同；id 用于 CSS 或 JS 选择，name 用于 usemap 关联。
@#@#@#@#@#@#@#@#@#@0）导出坐标，别手算
<li>把图片放在页面中不加任何 CSS 宽高限制时，再量坐标 —— 否则缩放后 coords 全乱</li>
<li>多边形区域顶点超过 10 个时，容易漏数或顺序错，建议拆成多个 <code><area>
为什么点击没反应？检查这三件事
图像映射失效，90% 是以下三个问题之一：
-
<area>缺少href或onclick—— 空链接不会触发跳转，也不会有手型光标 -
<area>没写alt—— 不影响功能，但部分屏幕阅读器和 Chrome DevTools 的热区高亮会失效 -
<map></map>放在了<img src="plan.png" alt="楼层图" usemap="#floor-map">后面但不在同一 DOM 上下文（比如被<div> 隔开又没注意闭合）—— 浏览器只认直接关联，不跨结构查找 <p>调试技巧：打开 Chrome DevTools → Elements 面板 → 找到 <code><area>标签 → 鼠标悬停，看右上角是否出现蓝色热区框；没有就说明关联失败或 coords 超出图片范围。响应式场景下
<map></map>还能用吗原生
<map></map>本身不响应式 ——coords是固定像素值，图片一缩放，热区就漂移。强行适配成本高，不推荐硬改。可行方案只有两个：
- 用 JavaScript 库（如
rwd-image-maps）监听窗口 resize，按比例重算所有coords—— 适合已有老项目，但维护麻烦、移动端 touch 事件支持弱 - 直接换 SVG：
<svg></svg>天然矢量、可缩放、支持 CSS 动画和hover，每个<path></path>或<rect></rect>都能绑定click和title，开发体验和可访问性都更好
真正需要图像映射的场景越来越少，除非你明确要求 SEO 友好、零 JS 依赖、且图片尺寸绝对固定 —— 否则优先考虑 SVG 或 CSS + JS 定位方案。
- 用 JavaScript 库（如
