原生图像映射需严格配对 usemap="#name" 与 map name="name"（name 无#、仅小写字母数字短横线），coords 基于原始图像素，area 必须含 alt 且自闭合，重叠时 DOM 顺序决定优先级。

直接用 标签本身无法定义可点击区域，必须配对使用 和 才能生效——这是唯一原生、无 JS 依赖的方案，但坐标固定、不响应式。

usemap 和 map name 怎么配才不报错

浏览器对大小写、空格、# 前缀极其敏感，错一个字符就完全失效。

• 中的 #floor-plan 必须一字不差地对应 的 name 值（注意：name 属性里没有 #）
• name 值不能含空格、中文、特殊符号，只建议用小写字母、数字、短横线
• 页面有多个热区图时，每个 usemap 和 name 都必须唯一，不可复用同一组名称
• 控制台若报 Failed to load resource，大概率是 这类无效链接——href 应为 ./plan.html#room1 或由 JS 拦截处理

coords 坐标怎么量才准

所有 coords 基于整张图左上角为 (0, 0)，单位是原始图片的像素，不是 CSS 渲染后的尺寸。

DeepBI DHTML 页面生成器

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

下载

• 矩形 shape="rect"：填 "x1,y1,x2,y2"，即左上角和右下角坐标，例如 coords="0,0,200,150"
• 圆形 shape="circle"：填 "cx,cy,r"，即圆心 x、y 和半径，例如 coords="100,80,30"
• 多边形 shape="poly"：按顺时针或逆时针顺序列出所有顶点 x,y 对，例如 coords="50,60,120,40,130,90,60,110"
• 务必用图像编辑工具（Figma / Photoshop）或在线坐标生成器打开**原始大图**测量，不要在缩放后的截图上估读
• 拼接图场景下，每个子图的坐标必须基于整张拼接图的像素位置计算，不是单个子图尺寸

area 标签常见漏项和兼容性坑

看似简单，但缺一不可，否则热区不触发、无障碍失效、SEO 受损。

• 每个 必须带 alt 属性，否则屏幕阅读器无法识别，也影响 SEO；空值写 alt=""，非空写描述性文字
• 多个 重叠时，DOM 顺序决定点击优先级——后写的覆盖先写的，调试时可用浏览器开发者工具实时拖动验证位置
• 是自闭合标签，不能写成 ，否则部分浏览器解析异常
• 移动端 Safari 对 usemap 支持良好，但若图片被 object-fit: cover 或 CSS 缩放拉伸，热区会严重偏移——此时必须用 JS 动态重算 coords，或改用 SVG

真正难的不是写几行 HTML，而是把坐标量准、把 name 配严、把 alt 写实。一旦图片尺寸或结构变化，所有 coords 都得重来——所以静态图、固定尺寸、低维护需求的场景才适合用这套原生方案。

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