原生图像映射需严格配对 usemap="#name" 与 map name="name"（name 无#、仅小写字母数字短横线），coords 基于原始图像素，area 必须含 alt 且自闭合，重叠时 DOM 顺序决定优先级。
直接用 <img alt="HTML网页图像区域映射怎么添加？页面嵌入操作步骤" > 标签本身无法定义可点击区域，必须配对使用 <map></map> 和 <area> 才能生效——这是唯一原生、无 JS 依赖的方案，但坐标固定、不响应式。
usemap 和 map name 怎么配才不报错
浏览器对大小写、空格、# 前缀极其敏感，错一个字符就完全失效。
-
<img usemap="#floor-plan" alt="HTML网页图像区域映射怎么添加？页面嵌入操作步骤" >中的#floor-plan必须一字不差地对应<map name="floor-plan"></map>的name值（注意：name属性里没有#） -
name值不能含空格、中文、特殊符号，只建议用小写字母、数字、短横线 - 页面有多个热区图时，每个
usemap和name都必须唯一，不可复用同一组名称 - 控制台若报
Failed to load resource，大概率是<area href="#room1">这类无效链接——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 受损。
立即学习“前端免费学习笔记（深入）”；
- 每个
<area>必须带alt属性，否则屏幕阅读器无法识别，也影响 SEO；空值写alt=""，非空写描述性文字 - 多个
<area>重叠时，DOM 顺序决定点击优先级——后写的覆盖先写的，调试时可用浏览器开发者工具实时拖动验证位置 -
<area>是自闭合标签，不能写成<area>，否则部分浏览器解析异常 - 移动端 Safari 对
usemap支持良好，但若图片被object-fit: cover或 CSS 缩放拉伸，热区会严重偏移——此时必须用 JS 动态重算 coords，或改用 SVG
真正难的不是写几行 HTML，而是把坐标量准、把 name 配严、把 alt 写实。一旦图片尺寸或结构变化，所有 coords 都得重来——所以静态图、固定尺寸、低维护需求的场景才适合用这套原生方案。
