90%热区失效源于usemap与map name字符串未逐字节匹配；必须usemap="#xxx"对应，大小写、符号、空格全敏感，漏#、错大小写或末尾空格均导致静默失效。
usemap 与 map name 不匹配导致静默失效
热区点击无效，90% 是因为 usemap 和 <map name=""></map> 字符串没对上——浏览器不做容错，错一个字符就彻底断连，控制台也不报错。
常见错误包括：usemap="mymap"（漏掉 #）、usemap="#MyMap" 对应 <map name="mymap"></map>（大小写不一致）、usemap="#provinces "（末尾有空格）。
- 必须严格满足：
usemap="#xxx"→<map name="xxx"></map>，注意#只出现在usemap值里，name属性里绝对不带 - 建议统一用小写字母 + 连字符命名，例如
usemap="#product-diagram"配合<map name="product-diagram"></map> -
<map></map>标签必须紧跟在<img>后面，不要被<picture></picture>、<figure></figure>或 Shadow DOM 包裹，否则外部引用失效
coords 坐标基于原始尺寸，CSS 缩放后必然偏移
coords 永远按图片的 naturalWidth / naturalHeight 计算，和 width: 100%、max-width、transform: scale() 无关。桌面调好，一上移动端或缩放视口，热区就“飘”了。
- 原始图是 1200×800，
coords="0,0,100,100"表示左上角 100×100 像素区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，低于触控最小推荐尺寸 44×44px - 没有纯 HTML/CSS 方案能自动适配；临时补救需 JS 监听
img.onload和window.resize，算出缩放比后遍历所有area，重写coords字符串 - 更稳妥的做法是直接改用
<svg></svg>：用viewBox固定原始宽高比，坐标写百分比，天然响应式，无需 JS 换算
poly 多边形 coords 格式错误或顶点不合法
shape="poly" 的 coords 必须是偶数个整数，逗号分隔、无空格，例如 "100,200,150,180,180,220,130,240"。少于 6 个数（即不足 3 个点），或含小数、空格、奇数个值，整个热区都会静默失效。
- 导出工具默认可能带小数（如
"100.5,200.3"）或空格（如"100, 200"），这些都会让浏览器拒绝解析 - 顶点顺序要顺时针或逆时针连续排列，避免交叉（如
"0,0,100,100,0,100,100,0"会画成 X 形，行为未标准化） -
shape属性严格区分大小写且只认小写值："rect"、"circle"、"poly"、"default"；shape="Poly"或shape="triangle"均无效
href 缺失或 nohref 已废弃，禁用热区需 CSS + JS 双保险
nohref 在 HTML5 中已被定义为过时属性，现代浏览器（Chrome 80+、Firefox 75+、Safari 14+）完全忽略它。仅移除 href 并不能真正禁用交互——该区域仍可聚焦、click 事件仍会触发，甚至冒泡到父 <map></map>。
- 真正禁用热区，必须三者齐备：不写
href+style="pointer-events: none;"+tabindex="-1" - 若需兼容 Safari iOS 13.4 以下版本，还得加 JS 绑定
click事件并调用e.preventDefault()和e.stopPropagation() -
href必须是有效 URL，纯#id不支持锚点跳转；想实现页面内跳转，得写href="./page.html#section"或配合 JS 处理
真正麻烦的不是写错一行 coords，而是失效时没有任何提示——它就安静地不工作。调试时优先检查 usemap/name 是否逐字节一致，再确认 area 是否嵌套在 map 内部且未被 CSS 隔离，最后才动 JS 补偿。复杂项目建议直接迁移到 SVG，省去所有坐标换算和兼容性缠斗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
