原生+实现图片热点需严格匹配usemap与map name（大小写、短横线一致）、坐标基于原始图尺寸、每个含href和alt，否则点击失效、无障碍缺失、SEO无效。
直接用 <map></map> + <area> 就能实现，但必须保证坐标基于原始图尺寸、usemap 与 name 严格匹配、每个 <area> 含 href 和 alt，否则架构图区域点不中、读不出、SEO 无效。
usemap 和 map name 怎么配才不白写
浏览器对匹配极其敏感，错一个字符整个映射就静默失效——不报错，但点击没反应。
-
<img usemap="#arch-diagram" alt="HTML怎么给架构图添加区域映射" >中的#arch-diagram必须和<map name="arch-diagram"></map>的name完全一致（大小写、短横线、无空格） -
name值不能含中文、空格、下划线，只建议用小写字母+数字+短横线，比如backend-services而非backend_services -
<map></map>标签不能被display: none、visibility: hidden或移出文档流（如position: absolute; left: -9999px）包裹，否则区域不可用 - 调试时右键图片 → 「检查」，看是否能高亮到对应
<map></map>；如果找不到，先查这个匹配关系
coords 坐标为什么总点不准
因为 coords 永远按图片文件的原始像素（naturalWidth/naturalHeight）计算，不是你 CSS 里写的 width: 100% 后的渲染尺寸。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 原图是 2400×1200，你在页面上缩成 600×300 显示，那
coords="0,0,300,150"实际仍对应原图左上角四分之一区域，视觉上根本点不到 - 用 PS / Figma / 在线工具（如 image-map.net）取坐标时，务必确认打开的是未缩放的原始图，而非导出后的响应式版本
- 临时验证方法：给
<img alt="HTML怎么给架构图添加区域映射" >加border: 1px solid red，再用开发者工具「截图选区」比对坐标是否真覆盖目标模块（比如「API 网关」框） - 若架构图需响应式，必须 JS 动态重算：
scaleX = img.offsetWidth / img.naturalWidth，再遍历所有<area>按shape类型缩放坐标（rect缩 4 个值，circle缩圆心+半径）
area 标签怎么写才语义完整又可用
缺 href 就没跳转行为，缺 alt 就破坏可访问性——旧版 Safari 会直接忽略该区域，屏幕阅读器也读不出「这是数据库层」。
立即学习“前端免费学习笔记（深入）”；
- 每个
<area>必须嵌套在<map></map>内，写在外面会被浏览器丢弃 - 推荐用
data-part="auth-service"这类自定义属性代替解析href或alt，更稳定易维护 - 移动端需额外监听
touchstart（iOS Safari 对click识别有延迟），或加cursor: pointer触发点击态 - 避免内联 JS：
onclick="goTo('db-layer')"不仅难调试，还和现代模块化代码冲突；改用事件委托：document.querySelectorAll('area').forEach(a => a.addEventListener('click', handleAreaClick))
真正麻烦的从来不是写几行 <area>，而是缩放后坐标失准、多端适配时区域漂移、无障碍支持被忽略——这些不是“可能出问题”，是只要用原生 <map></map> 就一定会撞上的硬约束。如果架构图要长期维护或支持暗色模式/高缩放比，优先考虑 SVG 替代。
