usemap与map的name必须逐字节严格匹配（含#、大小写、连字符、空格），否则热区静默失效；coords基于原始像素，缩放需JS重算或改用SVG；area必须嵌套于map内且href、alt不可省略。
usemap 和 map name 必须逐字节匹配
热区不响应，90% 是因为 usemap 和 没对上。浏览器不报错，只静默忽略整个映射逻辑。
必须满足这三点：
-
usemap值必须以#开头，比如usemap="#floor-plan" -
的name属性值必须和#后面的字符串**完全一致**（大小写、连字符、空格都不能差） -
name不能含中文、空格、下划线；推荐仅用小写字母、数字、短横线，如product-detail
调试时别靠眼扫——复制 usemap 的值，再复制 的值，用编辑器比对是否一字不差。
coords 坐标怎么填才不偏移
所有 coords 都是像素值，原点固定在图片左上角 (0, 0)，X 向右、Y 向下递增。设计稿给的“百分比坐标”或“居中坐标”不能直接抄。
不同 shape 对应的格式必须严格遵守：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且y1 -
shape="circle"→coords="cx,cy,r"：圆心 X、Y、半径，r必须是正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须为偶数；坐标间只允许英文逗号，不能有空格或换行
用 Photoshop / Figma / 在线工具（如 image-map.net）取点时，务必确认导出的是原始图尺寸下的像素坐标，不是缩放后视图里的位置。
响应式下 coords 失效怎么办
原生 没有响应式能力。图片被 CSS 缩放后，coords 还是按原始像素算，热区就错位了——这不是 bug，是设计限制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
如果必须用图像映射，得靠 JS 动态重算：
- 记录原始宽高：
img.naturalWidth和img.naturalHeight - 计算缩放比：
scaleX = img.offsetWidth / naturalW，scaleY = img.offsetHeight / naturalH - 遍历每个
，按shape类型分别缩放坐标：矩形缩 4 个值，圆形缩圆心+半径，多边形逐对缩 x/y - 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
更省事的方案是直接换 SVG —— 它天生适配缩放，语义清晰，还支持无障碍。
area 标签漏掉这些属性就白写了
不是写完 href 就能点的。缺任意一项，都可能让热区失效或不可访问。
必须包含：
-
href：没有它，点击无跳转行为；写成#room1这种无效片段会静默失败，应为./plan.html#room1或用 JS 拦截 -
alt：不是可选描述，是语义必需项。缺了屏幕阅读器无法识别功能，旧版 Safari 甚至直接忽略该 -
shape和coords：二者必须配套，且顺序、格式、分隔符全对
另外， 必须嵌套在 内部，单独写在 HTML 其他位置会被浏览器忽略。移动端点不准？先检查这三项有没有漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
