usemap与name必须严格配对且带#前缀，coords基于原始像素，缺href或alt则热区失效；响应式场景推荐改用svg替代image map。
usemap 和 name 必须严格配对，漏 # 或大小写错就失效
浏览器不会报错，但整个热区完全不响应。关键就两点：usemap 值必须带 # 前缀，<map></map> 的 name 属性值必须和它去掉 # 后完全一致，包括大小写、连字符、下划线——usemap="#floor-plan" 对应 <map name="floor-plan"></map>，写成 "FloorPlan" 或 "floorplan" 都断连。
coords 坐标必须基于原始图片像素，缩放后会偏移
所有 coords 值（比如 rect 的 0,0,200,150）都是按图片原始宽高算的，不是浏览器渲染后的尺寸。一旦用 CSS 设置了 width: 100% 或 max-width，热区就点不准。
-
rect：要 4 个值，顺序是左, 上, 右, 下（不是宽高） -
circle：要 3 个值，圆心x, 圆心y, 半径 -
poly：顶点坐标成对列出，x1,y1,x2,y2,x3,y3，首尾不必闭合，浏览器自动补 - 坐标超出图片原始边界（如图片宽 800px，却写
coords="0,0,900,100"）→ 右半部分热区静默失效
area 标签缺 href 或 alt 就等于没写
没有 href，点击无跳转；没有 alt，读屏器直接忽略该区域，无障碍检测失败，部分浏览器也会禁用点击。这不是“可选”，是强制要求。
-
<area shape="rect" coords="10,20,100,80" href="/room/a" alt="A区入口">✅ -
<area shape="rect" coords="10,20,100,80" href="/room/a">❌（缺 alt） -
<area shape="rect" coords="10,20,100,80" alt="A区入口">❌（缺 href，不可点击）
响应式场景下，别硬调 coords，优先换 SVG
用 JS 库（如 rwd-image-maps）动态重算 coords 虽可行，但依赖图片加载完成时机，容易因异步或懒加载出错。真正稳定的方案是放弃 <img> + <map></map> 组合，把图转成 SVG，用 <svg></svg> 内嵌 <path></path> 或 <rect></rect> 定义热区——矢量缩放天然适配，坐标相对，还能加 hover、transition、JS 事件监听。
复杂热区尤其明显：多边形顶点一多，手动调 coords 几乎不可维护，而 SVG 中改一个 d 属性就能重绘整个区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
