原生图像映射必须用 +，usemap 与 map[name] 必须严格匹配（含大小写、符号），usemap 值带 # 前缀而 name 不带；coords 格式按 shape 类型正确书写，无单位、无空格；css 缩放会导致热区偏移，需固定宽高或 js 动态重算坐标；仅执行 js 时禁用 href，务必添加 alt 保障可访问性。

原生方案只有 <map></map> + <area>，其他方式（CSS 覆盖、JS 坐标判断）要么语义错误，要么体验差、维护难。

usemap 和 map 的 name 必须严格匹配

这是最常失效的原因：浏览器不报错，但点击完全没反应。

• <img usemap="#product-map"> 中的 #product-map 必须和 <map name="product-map"></map> 的 name 完全一致（大小写、连字符、下划线都不能错）
• usemap 值必须带 # 前缀；<map></map> 的 name 绝对不能带 #
• 多个热区共用一张图时，所有 <area> 都要放在同一个 <map></map> 内，不能拆开

shape 和 coords 格式不能写错

浏览器对 coords 字符串零校验——填错就静默失效，连控制台警告都没有。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• shape="rect" → coords="10,20,100,80"（左上 x,y + 右下 x,y），不是宽高
• shape="circle" → coords="150,60,30"（圆心 x,y + 半径）
• shape="poly" → coords="200,10,250,30,230,90"（顶点 x,y 顺序列出，偶数个值）
• 所有数字用英文逗号分隔，禁止空格；coords 里不能出现单位（如 px）

图片缩放后热区偏移？coords 不自动适配

原生 <map></map> 的坐标基于图片原始像素尺寸（img.naturalWidth / img.naturalHeight），CSS 缩放（width: 100%、max-width）会让热区严重错位。

• 最简解法：给 <img> 写死 width 和 height 属性，与原始尺寸一致，并禁用 CSS 缩放
• 响应式场景建议绕过 <map></map>，改用 background-image + position: absolute 的 <div> 热区，配合 <code>aspect-ratio 或 padding-top 保比例
• 若坚持用 <map></map>，需 JS 动态重算：scale = img.offsetWidth / img.naturalWidth，再遍历每个 <area> 的 coords 字符串，拆分、转数字、乘缩放比、拼回

想执行 JS 而非跳转？别混用 href 和 onclick

<area> 支持 href（触发跳转）和原生 click 事件，但二者逻辑冲突。

• 如果只执行 JS（比如弹窗、上报、切换内容），就**不要写 href**，直接监听 click 并 event.preventDefault()
• 写了 href 又绑 onclick，部分浏览器会优先跳转，JS 执行不可靠
• 每个 <area> 必须加 alt，否则屏幕阅读器无法识别该区域功能

真正麻烦的从来不是写几行 <area>，而是坐标怎么量准、缩放怎么对齐、多端怎么保持热区大小不低于 44×44px —— 这些细节不处理，上线后用户点不到，你却查不出错在哪。