usemap 属性失效最常见的原因是 usemap 值漏写 #，必须为 usemap="#myMap" 且 严格匹配；旧版浏览器还需 id="myMap"；图片未设宽高会导致 coords 坐标偏移；coords 必须用整数像素值，按原图尺寸填写；area 必须嵌套在 map 内并带 alt 属性；响应式下 map 天然不可靠，推荐 SVG 或 CSS+JS 替代。
usemap 属性为什么总不生效
最常见的失败原因是 usemap 值漏了 #。写成 usemap="myMap" 浏览器直接无视，必须是 usemap="#myMap"；同时 <map></map> 的 name 属性值要严格等于 myMap（不带 #）。两者像钥匙和锁，错一个字符就打不开。
旧版 Safari 或 IE 兼容模式下，只写 name 不够，还得补上 id="myMap"，否则映射失效。另外，图片没设明确宽高（比如用 CSS 的 max-width: 100% 却没配 height: auto），会导致坐标系偏移——浏览器按渲染后尺寸算点击，但 coords 是按原始像素定的，一缩放就全歪了。
coords 坐标怎么填才准，别靠手估
coords 只认整数像素值，原点在图片左上角 (0,0)，X 向右、Y 向下增长。矩形是 left,top,right,bottom 四个数；圆形是 center_x,center_y,radius；多边形是顶点对连续排列，比如 60,40,120,30,110,90，必须偶数个数字，首尾不用重复（浏览器自动闭合）。
别截图量、别凭感觉写。推荐三类实操方式：
立即学习“前端免费学习笔记（深入）”；
- 在线工具如 Image Map Generator：上传图 → 拖框画热区 → 直接复制生成的 HTML
- VS Code 插件 “Image Map”：打开图片文件，鼠标悬停实时显示当前坐标，画完一键导出
- 浏览器插件 “Image Map Editor”：在已加载页面上直接叠加编辑层，所见即所得调整区域
注意：Photoshop 等软件导出的“百分比坐标”不能直接用，HTML5 已废弃该语法，填进去就是无效区域。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
area 标签必须带 alt，不是可选项
alt 属性是强制语义要求，不是装饰。没有它，屏幕阅读器无法告知视障用户“这个区域点进去是查看华东销售数据”，SEO 也会降权；title 虽非强制，但缺了用户悬停时看不到提示，容易误操作。
每个 <area> 还得确保嵌套在 <map></map> 内部，单独写在 HTML 任意位置都会被浏览器忽略。常见错误是把 <area> 放在 顶层，或者错放在 <img alt="HTML图像区域映射怎么弄？新手入门实用指南" > 标签内部（<img alt="HTML图像区域映射怎么弄？新手入门实用指南" > 不接受子元素）。
响应式场景下它天生不可靠
固定像素坐标的本质决定了：图片一缩放，热区就偏移。这不是 bug，是设计限制。移动端点不准、小屏 hover 失效、CSS transform: scale() 后完全失灵——都是正常现象。
如果项目必须适配多端，优先考虑替代方案：
- SVG：矢量图形，天然响应式，
<path></path>和<use></use>可绑定事件、加 class、做动画 - CSS + JS 定位：用
position: absolute在图上盖一层透明<div>，监听 click 并手动判断坐标范围 <li>JS 库动态重算：如 <code>rwd-image-maps，但需额外加载、维护成本不低
真要用 <map></map>，至少给图片加 width 和 height 属性（不是仅靠 CSS），并测试真实设备下的渲染像素尺寸——这才是坐标准确的前提。
