HTML图像映射的coords必须为“x1,y1,x2,y2”整数格式，原点在左上角；usemap与map name须逐字节匹配；响应式缩放需JS重算坐标或改用SVG；多图拼接须基于大图绝对坐标。
rect 的 coords 格式必须是 "x1,y1,x2,y2"
矩形热区只认四个数字，顺序不能错：左上角 x、左上角 y、右下角 x、右下角 y。浏览器按这个顺序解析，写成 "x1,y2,x2,y1" 或漏掉一个数，区域就完全不响应——而且控制台通常不报错，只能靠肉眼排查。
常见错误现象包括点击无反应、区域偏移到图片外、或只有一半生效。调试时可临时给 <img> 加 style="outline: 2px solid red"，再用开发者工具的“元素截图叠加”功能比对坐标落点。
- 坐标系原点在图片左上角，
(0,0)是起点，x 向右递增，y 向下递增 -
coords中不能有空格，比如"100, 50,200,150"的空格会导致 Firefox/Safari 忽略整条<area> - 值必须是整数（像素），小数如
"100.5"在部分安卓 WebView 中会被截断为100
usemap 和 map name 必须逐字节匹配
<img usemap="#floor-plan"> 中的 #floor-plan 必须和 <map name="floor-plan"> 的 name 值完全一致：大小写、短横线、有无空格，一个都不能差。浏览器对这个匹配极其敏感，错一个字符，整个映射就失效。
建议统一用小写字母 + 短横线命名，避免中文、下划线、空格。如果页面有多个图，每个 usemap 和每组 <map name> 都得唯一，不能复用同一组名称。
立即学习“前端免费学习笔记（深入）”；
-
<map>最好同时写id和name，比如<map id="floor-plan" name="floor-plan">，兼容性更稳 - 检查控制台是否出现
Failed to load resource，大概率是href写成了#room1这种无效锚点，应改为./plan.html#room1或用 JS 拦截
响应式缩放下 coords 会失效
原始 coords 基于图片原始尺寸（比如 800×600），一旦用 max-width: 100% 或 width: 100vw 缩放图片，热区位置立刻偏移——因为浏览器不会自动重算坐标。
这不是 bug，是设计如此。HTML 图像映射本身不支持响应式坐标变换。
- 固定尺寸方案：给
<img>设定明确宽高（如width="800" height="600"），禁用 CSS 缩放 - 动态适配方案：用 JS 监听窗口 resize，在缩放比变化时重新计算每个
coords值并更新<area>的coords属性 - 替代方案：改用 SVG，天然支持响应式缩放和语义化热区，复杂度略升但长期维护成本更低
多图拼接时坐标必须基于原始大图
所谓“九宫格”“楼层平面图”，本质仍是单张拼接图。每个子图的 coords 不是它自身尺寸，而是它在整张大图中的绝对像素位置。
例如第一块子图宽 200px、高 150px，且紧贴左上角，则它的 coords 就是 "0,0,200,150"；第二块若紧邻其右，则从 x=200 开始，coords 可能是 "200,0,400,150"。
- 务必用图像编辑工具（Figma / Photoshop / 在线坐标生成器）打开拼接后的完整图，直接读取各子图左上角和右下角的像素坐标
- 不要用多个
<img>+ CSS 定位模拟——那样无法保证语义化、不支持原生跳转、alt 文本也失效 - 若拼接图由 Canvas 动态生成，导出时就得记录各区块坐标，再注入 HTML；运行时靠 JS 测量 canvas 尺寸再反推坐标，误差大且不可靠
