原生需严格匹配usemap与map的name属性，coords须按shape类型精确填写并动态适配响应式缩放。
原生 + 不是“配个属性就能用”的功能，而是错一个字符就全失效的精密匹配机制——浏览器不报错，只静默忽略。
usemap 和 map 的 name 必须逐字节一致
这是 90% 热区点击无响应的根源。usemap="#product-map" 必须严格对应 ，大小写、连字符、空格、# 号缺一不可。
-
usemap="product-map"❌ 漏掉#，整个被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
❌usemap不认id，只认name - 调试时别靠眼睛扫：右键图片 → “检查”，复制
usemap值；再选中元素，复制其name属性；用编辑器做纯文本比对
coords 必须按 shape 类型精确填写
coords 不是“随便填的数字”，它由 shape 决定解析逻辑。填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且y1 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，部分浏览器（如 Safari）会静默跳过格式错误的 - 导出坐标时注意清理空格和换行：
coords中只允许数字和英文逗号，禁止空格、制表符、换行
响应式下 coords 必须 JS 动态重算
coords 永远绑定图片文件的 naturalWidth/naturalHeight，不是 CSS 渲染后的宽高。只要图片被缩放（max-width: 100%、width: 50%、object-fit），热区立刻失准。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 记录原始尺寸：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历所有
，按shape类型分别处理：
–rect：缩放全部 4 个值
–circle：缩放cx、cy和r
–poly：逐对缩放每组x,y - 监听时机：
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
area 必须嵌套在 map 内且 href、alt 不可省略
缺 href，点击无跳转行为；缺 alt，不仅屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该 。
-
必须作为的直接子元素，写在外面会被浏览器忽略 - 如果只是想触发 JS（比如弹窗、上报），可以去掉
href，但务必保留alt并加data-id标识，再用document.querySelectorAll('area[data-id]')绑定click事件 - 不要依赖
getBoundingClientRect()反推坐标——它受transform、margin等干扰，不稳定
真正容易被忽略的是：你写的每个 coords 都是基于原始图像素的静态快照，而现代页面几乎都响应式。不写 JS 重算，移动端点不准就是必然结果，不是 bug，是设计限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
