usemap属性跨目录时路径不用加../，因其值是逻辑名称而非文件路径，只与同页的name值严格匹配（大小写敏感），且必须以#开头。
usemap 属性跨目录时路径要不要加 ../？
不用。usemap 的值是逻辑名称引用，不是文件路径，跟目录结构完全无关。它只负责把 <img> 和同页面内的 <map name="xxx"></map> 关联起来——哪怕 <map></map> 写在 最底下，只要 name 和 usemap="#xxx" 严格匹配就行。
常见错误是误以为要写成 usemap="../maps/logo-map" 或类似路径形式，这会导致映射彻底失效，浏览器直接忽略 <map></map>。
-
usemap必须以#开头，且只含字母、数字、下划线、短横线（如#nav-map） -
<map></map>的name属性值必须和usemap去掉#后完全一致（大小写敏感） - HTML5 要求同时设置
name和id，否则旧版 Safari 或 IE 兼容模式可能不认
图片文件跨目录，coords 坐标还准不准？
准，但仅限「图片原始尺寸未变」的前提下。因为 <area coords> 的所有数值都是基于图片原始像素坐标的，原点在左上角（0,0），X 向右、Y 向下递增——这个坐标系和目录在哪毫无关系。
真正影响坐标准确性的，是图片是否被 CSS 缩放、是否设置了 width/height 属性、是否用了 max-width: 100% 等响应式样式。一旦图片视觉尺寸变了，而 coords 还是按原始像素写的，热区就必然偏移。
- 如果图片放在
../assets/img/map.png，但 HTML 中用<img src="../assets/img/map.png" style="max-width:90%" style="max-width:90%">显式固定尺寸，那coords="100,50,200,150"依然有效 - 如果只写
<img src="../assets/img/map.png" style="max-width:90%">，图片在小屏上缩到 400px 宽，coords 却没重算，点击区域就会错位 - 不要依赖图像编辑器导出的“百分比坐标”——HTML5 已废弃该语法，只认像素值
多个 HTML 文件共用同一组 map 定义，怎么组织？
不能直接复用。HTML 的 <map></map> 必须和使用它的 <img> 在同一个 HTML 文档内，浏览器不支持跨文件引用 <map></map>。所谓“共用”，只能靠复制粘贴或构建时注入。
可行做法只有三种：
- 把
<map></map>定义放在每个需要它的 HTML 文件里（最简单，适合静态小站） - 用构建工具（如 Webpack + html-loader）或服务端模板（如 EJS、PHP）把 map 片段自动插入到各页面中
- 改用 SVG：把图片转成 SVG，用
<use></use>+<symbol></symbol>复用定义，天然支持跨文档引用和响应式缩放
硬要 JS 动态加载 <map></map> 并插入 DOM 是可行的，但会破坏 SEO 和无障碍访问，且首次渲染时热区不可用，不推荐。
为什么 map 在子目录 HTML 里总不生效？
大概率不是路径问题，而是两个隐藏陷阱：
-
<img>缺少明确的width和height属性（或等效 CSS 尺寸）。浏览器在图片加载完成前无法确定其自然尺寸，导致坐标系初始化失败，area 区域计算为空 -
<map></map>放在了<img>标签之后，但 HTML 解析是顺序执行的；虽然多数现代浏览器能回溯匹配，但某些环境（如部分 WebView 或低版本 Android 浏览器）要求<map></map>必须出现在<img>之前
验证方法：打开开发者工具 → Elements 面板，确认 <map name="xxx"></map> 确实存在，且 <img usemap="#xxx"> 的 #xxx 和它完全一致；再检查图片元素 computed 样式里 width/height 是否有确定值。没有就补上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
