图片与需通过usemap和name严格匹配（大小写敏感、无空格），且必须同文档流；coords基于原图尺寸，CSS缩放不改变坐标基准；area的href须为有效URL，img须有alt属性。

图片和 必须通过 usemap 与 name 严格匹配才能生效，缺一不可，且大小写敏感。

usemap 和 map name 必须完全一致

浏览器只认字符串是否完全相等，不自动补 # 或忽略空格。常见错误包括：

• usemap="#mymap" 对应 ✅
• usemap="mymap" 对应 ✅（HTML5 允许省略 #）
• usemap="#Mymap" 对应 ❌（大小写不匹配）
• usemap="#mymap "（末尾有空格）对应 ❌

调试时可临时在控制台执行 document.querySelector('img[usemap]').getAttribute('usemap') 和 document.querySelector('map').getAttribute('name') 直接比对原始值。

map 标签不能放在 img 外部 DOM 上下文里

必须和 在同一文档流中，否则无法关联。典型失效场景：

• 在 或
  内，而 在其外 → 失效
• 渲染在 Shadow DOM 中（如 Web Component），外部 不可见 → 失效
• 放在 或注释块中 → 浏览器忽略解析

安全做法：把 紧跟在 后面，同级、同父容器，且都在 内。

coords 坐标必须基于原始图片尺寸

哪怕你用 CSS 缩放了图片（比如 width: 100%; height: auto），coords 依然按原图像素计算。例如：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 原图宽高是 800×600，你画了个矩形 coords="100,50,200,150"
• 页面上用 CSS 把它缩成 400×300（缩放系数 0.5），那热点区域实际会偏移到左上角四分之一处

解决方法只有两个：
① 用 JS 动态重算坐标（如 jQuery rwdImageMaps 库）；
② 改用 SVG 替代 —— SVG 的 等价物（如 + onclick）天然响应式。

area 标签 href 不能为空或纯锚点

的 href 必须是可解析的 URL，否则点击无反应：

• href="#" 或 href="" → 静默失败（不是跳首页，是根本没触发）
• href="#section1" → 多数浏览器不支持，仅当配合 ismap 服务端处理才可能有效，客户端无效
• href="./page.html#detail" ✅
• href="javascript:void(0)" ✅（再用 JS 绑定逻辑）

另外， 必须带 alt 属性，旧版 IE 和部分读屏工具会因此禁用整个热点功能。

最常被忽略的是：所有坐标都以原始图片左上角为 (0,0)，而开发者调试时往往盯着缩放后的渲染结果调 coords，结果永远对不准。真要手调，先关掉所有 CSS 尺寸控制，用原图尺寸校准，再加适配逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！