图片与需通过usemap和name严格匹配（大小写敏感、无空格），且必须同文档流；coords基于原图尺寸，CSS缩放不改变坐标基准；area的href须为有效URL，img须有alt属性。
图片和 <map></map> 必须通过 usemap 与 name 严格匹配才能生效，缺一不可，且大小写敏感。
usemap 和 map name 必须完全一致
浏览器只认字符串是否完全相等，不自动补 # 或忽略空格。常见错误包括：
-
usemap="#mymap"对应<map name="mymap"></map>✅ -
usemap="mymap"对应<map name="mymap"></map>✅（HTML5 允许省略#） -
usemap="#Mymap"对应<map name="mymap"></map>❌（大小写不匹配） -
usemap="#mymap "（末尾有空格）对应<map name="mymap"></map>❌
调试时可临时在控制台执行 document.querySelector('img[usemap]').getAttribute('usemap') 和 document.querySelector('map').getAttribute('name') 直接比对原始值。
map 标签不能放在 img 外部 DOM 上下文里
<map></map> 必须和 <img alt="HTML区域映射如何关联图片热点" > 在同一文档流中，否则无法关联。典型失效场景：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML区域映射如何关联图片热点" >在<picture></picture>或<figure></figure>内，而<map></map>在其外 → 失效 -
<img alt="HTML区域映射如何关联图片热点" >渲染在 Shadow DOM 中（如 Web Component），外部<map></map>不可见 → 失效 -
<map></map>放在或注释块中 → 浏览器忽略解析
安全做法：把 <map></map> 紧跟在 <img alt="HTML区域映射如何关联图片热点" > 后面，同级、同父容器，且都在 内。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
coords 坐标必须基于原始图片尺寸
哪怕你用 CSS 缩放了图片（比如 width: 100%; height: auto），coords 依然按原图像素计算。例如：
- 原图宽高是 800×600，你画了个矩形
coords="100,50,200,150" - 页面上用 CSS 把它缩成 400×300（缩放系数 0.5），那热点区域实际会偏移到左上角四分之一处
解决方法只有两个：
① 用 JS 动态重算坐标（如 jQuery rwdImageMaps 库）；
② 改用 SVG 替代 <map></map> —— SVG 的 <area> 等价物（如 <path></path> + onclick）天然响应式。
area 标签 href 不能为空或纯锚点
<area> 的 href 必须是可解析的 URL，否则点击无反应：
-
href="#"或href=""→ 静默失败（不是跳首页，是根本没触发） -
href="#section1"→ 多数浏览器不支持，仅当配合ismap服务端处理才可能有效，客户端无效 -
href="./page.html#detail"✅ -
href="javascript:void(0)"✅（再用 JS 绑定逻辑）
另外，<img alt="HTML区域映射如何关联图片热点" > 必须带 alt 属性，旧版 IE 和部分读屏工具会因此禁用整个热点功能。
最常被忽略的是：所有坐标都以原始图片左上角为 (0,0)，而开发者调试时往往盯着缩放后的渲染结果调 coords，结果永远对不准。真要手调，先关掉所有 CSS 尺寸控制，用原图尺寸校准，再加适配逻辑。
