map的name属性本身不能带#，只有img的usemap属性值才需以#开头；二者字符串必须逐字节一致（含大小写、符号），否则热区静默失效。
map 的 name 属性必须带 # 吗？
不带 # 是常见错误，但 name 本身**不能含 #**——只有 img 的 usemap 属性才需要。浏览器会把 usemap="#floorplan" 中的 # 当作选择器前缀，去匹配 <map name="floorplan"></map>。写成 usemap="floorplan" 或 <map name="#floorplan"></map> 都会导致映射失效。
容易踩的坑：
-
name值大小写敏感，usemap="#Floorplan"和<map name="floorplan"></map>不匹配 - 多个
<map></map>共存时，name必须全局唯一，否则浏览器只认第一个 - 旧版 IE 要求同时写
id和name，且值完全一致：<map id="floorplan" name="floorplan"></map>
area 的 shape 和 coords 怎么对应？
shape 决定 coords 的格式和含义，不是随便填数字就行。坐标全部基于原图左上角 (0,0)，单位是像素，不随缩放自适应。
参数差异和常见错误：
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：必须是左上 + 右下，顺序反了（比如"x2,y2,x1,y1"）区域会消失 -
shape="circle"→coords="cx,cy,r"：半径不能为负或 0，r=0等价于不可点击 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点必须按顺时针或逆时针闭合，首尾点不必重复（现代浏览器已不要求），但漏掉任一坐标对就会截断区域 - 没写
shape时，浏览器默认按rect解析coords，容易误判
多个 map 共存时怎么避免命名冲突？
没有自动命名空间，全靠人工约定。真实项目里常出现同一张页面里有「楼层平面图」「设备分布图」「电路拓扑图」三张图，各自需要独立热点。
实用建议：
- 用业务语义 + 场景后缀组合命名，例如：
name="floorplan-l2"、name="equipment-rack-a"、name="circuit-main-panel" - 避免泛化名如
"map1"、"hotmap"，这类名字在多人协作或后期维护时根本无法定位 - 如果映射逻辑来自配置文件或 CMS，建议把
name和后端数据 ID 对齐，比如name="map_12345"，方便前后端日志追踪 - 禁止用中文、空格、特殊符号（如
name="二楼平面图"），部分服务端框架（如 Java Servlet）会直接丢弃该<map></map>
响应式页面里 coords 还能用吗？
原生 <map></map> 的 coords 是固定像素值，图片缩放后热点位置必然偏移——这不是 bug，是设计如此。很多团队卡在这里反复调参，最后发现是方向错了。
可选路径只有两个：
- 放弃
<map></map>，改用<svg></svg>：矢量图形天然适配缩放，<path></path>或<polygon></polygon>支持百分比坐标和 CSS 动画，交互也更可控 - 保留
<map></map>但加 JS 补偿：监听resize和load，用img.naturalWidth / img.clientWidth算出缩放比，再遍历所有<area>重设coords。注意：IE 不支持直接改area.coords，得用setAttribute
真正容易被忽略的是：哪怕你用了 JS 动态重算，只要图片是通过 background-image 加载的（而非 <img alt="HTML多区域映射怎么区分名称？命名规则实用建议" > 标签），<map></map> 就完全无效——它只绑定到 <img alt="HTML多区域映射怎么区分名称？命名规则实用建议" > 元素。
