usemap 属性值必须以 # 开头且严格匹配 map 的 name，coords 按原图尺寸计算，area 必须嵌套于 map 内、含 href 和 alt，shape 与 coords 数量须对应，poly 需手动闭合首尾点。
usemap 属性值必须带 # 前缀，且 name 必须严格匹配
浏览器只认 usemap="#nav-map" 这种写法，usemap="nav-map" 或 usemap="#Nav-Map" 都会断连。哪怕只是多一个空格、大小写不一致、或漏了 #，Chrome 开发者工具里右键图片 → “检查”，就看不到对应 <map></map> 高亮，说明关联失败。
实际操作中建议：
- 统一用小写字母 + 连字符命名，比如
name="product-section"，然后usemap="#product-section" - 在 HTML 中同时写
id和name（HTML5 兼容性更稳）：<map id="product-section" name="product-section"></map> - 避免把
<map></map>放在或注释块里——它必须是内可渲染的节点，JS 动态移除后再插入也容易丢失绑定
coords 坐标永远按原图尺寸计算，不是显示尺寸
如果一张 1200×800 的图，用 CSS 缩成 600×400 显示，coords="0,0,100,100" 仍指原始左上角 100×100 像素区域——现在它只占屏幕上的 50×50 像素，点起来必然偏移。
解决办法只有两个：
- 不用缩放：让
<img>的width/height属性和原图一致，靠容器限制显示大小（但可能拉伸） - 用 JS 动态重算
coords：监听load和resize，读取img.naturalWidth/naturalHeight与当前offsetWidth/offsetHeight的比例，再逐个修正每个<area>的coords属性值
area 必须嵌套在 map 内部，且 href 和 alt 不可省略
<area> 是个空元素，不能闭合（ 是错的），且必须放在 <map></map> 标签内部。放在外面或被包裹在其他标签里（比如 <div><area></div>），所有浏览器都会忽略它。
更关键的是：href 和 alt 是必需属性。
- 没
href：点击无跳转，也不触发默认行为（即使绑了 JS click 事件，部分旧浏览器也不会冒泡） - 没
alt：无障碍支持直接失效，屏幕阅读器跳过该热区，Chrome 也会在控制台报 warning - shape 和 coords 缺一不可：比如
shape="rect"时，coords必须是 4 个数字；shape="circle"时必须是 3 个；shape="poly"至少要 6 个（即 3 个点）
多边形 area 的 coords 不自动闭合，首尾点要手动重复
shape="poly" 的 coords 列表不会自动把最后一个点连回第一个点，也就是说 coords="10,20,30,40,50,60" 只画出两条线段（10,20→30,40，30,40→50,60），不是三角形。
正确做法是显式重复起点：
- 三角形：用
coords="10,20,30,40,50,60,10,20" - 四边形：四个顶点共 8 个数，首尾相同，如
coords="0,0,100,0,100,100,0,100,0,0" - 工具导出的坐标常常已经包含闭合点，但手工写时极易漏掉——建议复制后立刻数一下数字个数是不是偶数，且首尾两组是否一致
图像地图的坐标系统是静态绑定到原始像素的，没有响应式内建逻辑；<area> 的语义和可访问性依赖严格属性组合，不是“能点就行”。这些约束在快速原型阶段容易被绕过，但上线后兼容性和维护成本会集中爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
