usemap 的值必须以 # 开头且与 map 的 name 属性完全一致（大小写、符号均敏感）；map 必须在同文档内，不能跨 iframe 或动态注入；area 坐标基于原图尺寸，缩放后需手动换算；shape="poly" 坐标数须为偶数；img 不可嵌套在 a 或 button 中，否则 usemap 被规范强制忽略。

usemap 的值必须带 #，且和

浏览器只认 usemap="#xxx" 这种写法，漏掉 #（比如写成 usemap="xxx"）就彻底断连——不报错、不警告，图片热区就是点不动。这个匹配是逐字节敏感的：name="Floor1" 和 usemap="#floor1" 也不行，大小写、下划线、空格都得一模一样。

map 必须在同一个 HTML 文档里，不能跨 iframe 或 fetch 注入

<map></map> 标签不会跨文档生效。常见失效场景包括：

• 把 <map name="nav"></map> 放在外部 HTML 文件里，再用 <iframe src="map.html"></iframe> 加载
• 用 fetch() 获取 map HTML 片段后直接 innerHTML 插入，但没等 <img> 渲染完成就挂载
• 把 <map></map> 插入到 Shadow DOM 里，而 <img> 在 light DOM 中

只要确保 <map></map> 是 document.body（或 img 的某个祖先容器）的子节点，位置前后无所谓。

area 的 coords 值基于原始图片尺寸，缩放后会失效

哪怕你用 CSS 把图片缩放到 50%，<area shape="rect" coords="10,20,100,80"> 依然按原图宽高计算坐标。浏览器不会自动换算。这意味着：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 响应式页面中，<map></map> 很快就不准——建议改用 SVG 或绝对定位 + JavaScript 动态重算
• 用开发者工具检查图片实际渲染尺寸，再按比例反推 coords：比如原图 800×600，显示为 400×300，则所有 coords 除以 2
• shape="poly" 的坐标数必须是偶数，每个点是 x,y 成对出现，多一个少一个都会让整个区域失效

img 不能嵌套在 或 里，否则 usemap 被忽略

HTML 规范明确禁止：如果 <img> 是 <a></a> 或 <button></button> 的后代，浏览器会直接丢弃它的 usemap 属性。现象是热区完全静默，控制台也无提示。

正确写法是让 <img> 和 <map></map> 并列于同一层级，例如：

<figure>
  @@##@@
  <map name="floor1"><area shape="rect" coords="10,20,100,80" href="/room1" alt="房间1"></map></figure>

真正容易被忽略的是：这个限制不是 bug，而是规范强制行为。哪怕你加了 pointer-events: none 或 JS 拦截 click，也无法绕过解析阶段的属性丢弃。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！