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