复制图像映射需同时提取及其全部标签的outerHTML，确保usemap值与map的name属性一致（前者带#，后者不带），并验证coords适配图片实际尺寸及CSP策略限制。
直接复制
HTML 中的图像映射（image map）本身没有“复制接口”或 API，所谓“复制现有映射区域代码”，就是手动提取页面中已有的 元素及其内部所有 标签的 HTML 源码。浏览器开发者工具能直接看到并选中这些标签，复制操作和普通 HTML 一样。
关键点在于：必须同时复制 容器和所有子 ，且确保 name 属性与对应
在 Chrome / Edge / Firefox 里怎么快速定位并复制
打开开发者工具（F12），用元素选择器（Ctrl+Shift+C）点一下带热点的图片，看右侧 DOM 树里是否出现 ；如果没立刻显示，按 Ctrl+F 搜索
- 别只复制
单个标签——缺了容器，这些区域无法被识别 - 如果页面用了动态生成（比如 JS 插入
），需在 Elements 面板刷新后立即复制，避免被后续脚本覆盖或清空 -
usemap值形如"#nav-map"，注意复制时保留开头的#；但里的name不带#
coords 值容易粘错位置
coords 是纯数字列表，顺序和 shape 强绑定：比如 shape="rect" 要 4 个值（左、上、右、下），shape="circle" 要 3 个（圆心 x、y、半径），shape="poly" 是成对的 x,y 坐标序列。复制时如果只截了一半坐标，或者把像素值误当成百分比（反之亦然），点击区域就会偏移甚至消失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 检查原图尺寸是否和当前显示尺寸一致——CSS 缩放图片会导致
coords失效，此时需按比例换算或改用响应式方案 - 不要手动修改
coords数字后不验证：把复制的代码粘到新页面，用相同尺寸图片测试每个热点是否准确触发 - 若原
含href或onclick，记得一并复制属性值；事件处理器如果是内联函数（如onclick="doNav(2)"），还需确认该函数在新环境已定义
复制后在新页面不生效？先核对这三处
最常见失效不是代码错，而是上下文断开。重点盯住这三个地方：
-
usemap属性值（如usemap="#main-map"）必须和的name完全一致（包括大小写和符号） -
必须在 - 如果新页面启用了 CSP（Content Security Policy），且策略禁止内联脚本或
javascript:协议，那么含onclick或href="javascript:..."的会被静默拦截
坐标不准、链接跳转失败、点击无反应——八成卡在这三处之一。盯着控制台报错（比如 “Refused to execute inline script”）比反复改 coords 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
