必须用原始图尺寸精确读取像素坐标，usemap与map name须逐字节严格匹配（含#、大小写、连字符），响应式下需JS动态重算coords或改用SVG替代。
直接用 <map> + <area> 就能做楼层导航热区，但坐标不准、usemap 和 name 不匹配、响应式缩放没处理——这三处任一出错，点击就完全失效。
怎么量出每个楼层在拼接图里的准确 coords
楼层平面图通常是多层合并成一张大图（比如 1F–5F 垂直排列），每个楼层对应一个矩形区域。不能靠“目测”或“截图后拉框”，必须基于原始图左上角 (0, 0) 精确读取像素值：
- 用 Figma / Photoshop 打开原始拼接图，打开标尺和信息面板，拖动参考线对齐每层边界
- 记录每层左上角
x1,y1和右下角x2,y2，例如 2F 区域是0,320,800,640（宽 800px，高 320px） - 如果图是 Canvas 导出的，导出时就得把各层
y偏移存进 JSON，别等 HTML 里再 JS 测量——Canvas 的toDataURL不保留原始尺寸元数据 - 在线工具如 Image Map Generator 可拖拽生成，但务必核对导出的
coords是否与原始图分辨率一致
usemap="#floor-map" 和 <map name="floor-map"> 怎么配才不白写
这是最常静默失败的环节：浏览器对名称匹配极其严格，错一个字符就整个映射失效，控制台也不会报错。
-
<img usemap="#floor-map">中的#floor-map必须和<map name="floor-map">的name值**逐字节一致**（注意：name里没有#） -
name值禁用空格、中文、下划线、大小写混用；推荐只用小写字母+短横线，如floor-plan-2f - 同一页面有多个楼层图（比如总览图 + 电梯井放大图），每个
usemap和name都得唯一，不能复用同一组名称 - 检查
<area href="#2f">：如果只是锚点跳转，href必须是有效 URL（如./plan.html#2f），#2f这种纯 fragment 在某些浏览器中会触发“Failed to load resource”警告
响应式下热区错位怎么办
原生 <map> 的 coords 是固定像素值，图片缩放后热区不会跟着变——用户缩放页面或换手机访问，点的位置就全偏了。
立即学习“前端免费学习笔记（深入）”；
- 简单项目且图片宽度固定（如 max-width: 800px），可用 CSS
image-rendering: -webkit-optimize-contrast抑制模糊，但热区仍需 JS 重算 - 推荐加轻量 JS 库
rwd-image-maps，初始化只需一行：$('img[usemap]').rwdImageMaps();，它会监听resize并按缩放比重投coords - 复杂交互（如悬停高亮、楼层联动、带状态标记）直接改用 SVG：每个楼层用
<g id="2f"><rect></g>封装，坐标用百分比或 viewBox 自适应，语义和可访问性也更强 - 不要试图用
transform: scale()或zoom强行缩放图片——<map>完全不感知这些 CSS 变换
真正卡住人的从来不是写几行 <area>，而是坐标从哪来、名字配没配对、缩放后还准不准——这三步漏掉任意一个调试细节，热区就变成“看起来有，点不动”的幽灵区域。
