直接用<map>+<area>可实现拼接图多热区，但需确保usemap与map name逐字节匹配、coords基于原始大图精准计算各子图像素位置、shape="rect"填"x1,y1,x2,y2"，且响应式下须JS重算缩放比或改用SVG替代。
直接用 <map> + <area> 就能实现，但必须确保图片原始尺寸固定、坐标精准、usemap 和 name 严格匹配，否则点击无效或区域错位。
如何让拼接图中每个子图变成独立热区
多图拼接（如九宫格产品图、楼层平面图）本质仍是单张图片，所以仍走图像映射路线。关键不是“拆图”，而是把每个子图在原始大图中的像素位置算准，填进对应的 <area> 的 coords 里。
- 先用图像编辑工具（Figma / Photoshop / 在线坐标生成器）打开拼接后的完整图片，量出每个子图左上角和右下角的像素坐标（以整张图左上角为
(0, 0)） - 每个子图对应一个
<area shape="rect">，coords填"x1,y1,x2,y2"，比如第一块在(0,0,200,150) - 不要试图用多个
<img>+ CSS 定位模拟——那样无法保证区域语义化，也不支持原生跳转或可访问性（alt） - 若拼接图是动态生成的（如 Canvas 导出），需在导出时记录各区块坐标，再注入 HTML，不能靠 JS 运行时测量
usemap="#xxx" 和 map name="xxx" 怎么配才不报错
这是最常卡住的地方：浏览器对大小写、空格、#前缀极其敏感，错一个字符就完全失效。
-
<img usemap="#floor-plan">中的#floor-plan必须一字不差地对应<map name="floor-plan">的name值（注意：没有#） - name 值不能含空格、中文、特殊符号，建议只用小写字母、数字、短横线
- 如果页面有多个热区图，每个
usemap和name都必须唯一，不能复用同一组名称 - 检查控制台是否报
Failed to load resource—— 很可能是 href 写成#room1这种无效值，应改为./plan.html#room1或用 JS 拦截
poly 多边形热区 coords 写错会怎样
多边形适合不规则拼接边界（如斜切模块、弧形区域），但 coords 格式稍有偏差，整个区域就消失或错位，且无报错提示。
立即学习“前端免费学习笔记（深入）”；
-
coords必须是偶数个数字，例如三角形写成"100,50,200,50,150,150"（3 对，6 个数）；少一个就会被 Safari 或 Firefox 忽略 - 坐标之间只能用英文逗号分隔，不能有空格或换行，像
"100, 50"中的空格会导致解析失败 - 顶点顺序影响填充逻辑：顺时针/逆时针都行，但自相交（如蝴蝶形）在旧版 Edge 和部分安卓 WebView 中不渲染
- 调试时可临时给
<img>加style="outline: 2px solid red"，再用浏览器开发者工具的“截图叠加”功能比对坐标落点
响应式下热区失灵怎么办
原始坐标基于图片原始尺寸，图片一缩放（尤其是 max-width: 100%），热区就偏移。这不是 bug，是设计使然。
- 纯 CSS 响应式方案无法自动适配
<area>坐标，必须引入 JS 计算缩放比例并重设coords - 轻量级方案：用
rwd-image-maps库，在图片加载后自动重映射，只需加一行$('img[usemap]').rwdImageMaps(); - 更现代的替代：把拼接图改用 SVG 实现，每个子图用
<g>包裹，transform缩放不影响点击区域，且天然响应式 - 移动端要特别注意：iOS Safari 对小于 44×44px 的
<area>点击识别率极低，建议最小热区设为 44px 或以上，或加touch-action: manipulation
真正麻烦的不是写几行 <map>，而是坐标来源是否可靠、缩放逻辑是否覆盖所有设备、以及当图片由 CMS 动态拼接时，如何把坐标数据和 HTML 同步输出——这些环节一旦脱节，热区就变成“看不见的按钮”。
