usemap="#name"关联失效最常见原因是字符串不一致，如漏#、大小写错误、末尾空格；area必须是map直接子元素且href、alt不可省略；coords基于原始尺寸，CSS缩放需手动换算；推荐用SVG替代。
usemap="#name" 与
关联失效最常见原因不是坐标写错，而是字符串不一致——浏览器不做任何容错，错一个字符就静默断连。Chrome 开发者工具里右键图片 → “检查”，如果不能高亮对应
常见错误包括：usemap="nav-map（漏掉 #）、usemap="#Nav-Map（大小写或连字符不一致）、usemap="#product-map "（末尾有空格）。建议统一用小写字母 + 连字符命名，比如 usemap="#product-section 配合 <map name="product-section"></map>；为兼容 HTML5，可同时写 id 和 name：<map id="product-section" name="product-section"></map>。
area 必须是 map 的直接子元素，且 href、alt 不可省略
area 不是通用交互标签，脱离 map 就彻底被忽略。它不能嵌套在 div、section、注释或 script 中，也不能放在 head 或 picture 里——哪怕只是多一层包裹，所有浏览器都会跳过它。
href 和 alt 是强制属性：
– 缺 href：点击无跳转，JS 绑定的 click 事件在 IE/旧 Safari 中可能不触发；
– 缺 alt：屏幕阅读器跳过该热区，Chrome 控制台报 warning，无障碍直接失效；
– href="#" 或 href="#section" 在多数浏览器中会失效或引发页面跳动，推荐用 href="javascript:void(0)" 或真实路径。
立即学习“前端免费学习笔记（深入）”；
coords 坐标永远基于图片原始尺寸计算，CSS 缩放必然导致偏移
coords 绑定的是 img.naturalWidth / img.naturalHeight，和 offsetWidth、max-width、width: 100% 完全无关。一张 1200×800 的图用 CSS 缩成 600×400 显示，coords="0,0,100,100" 仍指向原始图左上角 100×100 像素区域——现在它只占屏幕上约 50×50 像素，点不准是必然的。
临时补救方案（仅适用于简单缩放）：
– 监听 img.onload 和 window.resize；
– 计算缩放比：scaleX = img.naturalWidth / img.offsetWidth，scaleY = img.naturalHeight / img.offsetHeight；
– 对每个 area.coords 字符串做正则解析，按 shape 类型分别缩放：
• rect：四个数分别乘 scaleX、scaleY、scaleX、scaleY；
• circle：前两个坐标乘对应缩放比，半径乘 Math.min(scaleX, scaleY)；
• poly：所有偶数位（x）乘 scaleX，奇数位（y）乘 scaleY。
现代替代方案：优先考虑 SVG 而非 map/area
原生 map/area 在响应式、缩放、无障碍、维护性上都存在硬伤。SVG 天然支持 viewBox 和百分比坐标，无需 JS 换算，缩放、适配多端更稳定，poly 区域也更容易编辑和调试。
如果必须保留 map/area：
– 禁用 pointer-events: none 在 img 或父容器上，它会让所有 area 失效；
– 不要用 shape="default" 做兜底，它不可预测且干扰调试；
– poly 的 coords 不自动闭合，首尾点需手动重复，否则只画线段不形成封闭区域。
