手动标注area shape="poly" coords须基于原始图尺寸逐点采集像素坐标，避免顶点顺序错、少位数、用百分比；首尾点勿重复；usemap与map name须严格一致且仅含小写字母数字短横线；响应式需用rwd-image-maps、SVG或媒体查询多套图；移动端热区物理尺寸须≥44×44px。
area shape="poly" 的 coords 怎么手动标才不偏移
多边形热区必须基于原始图片尺寸，逐点采集顶点像素坐标；浏览器不会校验、也不会报错，填错就静默失效。常见现象是鼠标悬停区域“缩了一块”或“多出一条线”，本质是顶点顺序错、坐标少一位、或用了设计稿百分比换算。
实操建议：
- 用 Photoshop 钢笔工具描边后导出路径 → 用 Python 脚本转成
coords字符串（格式如"100,50,200,50,150,150"），避免手输漏逗号 - 在线工具 image-map.net 可上传图后直接拖点，生成的
coords值可复制粘贴，但注意它默认带空格（如"100, 50"），必须删掉所有空格再用 - 临时给
<img alt="HTML不规则多区域映射怎么做？复杂热区制作流程" >加style="max-width:90%"，截图叠加到设计稿上比对，确认每个顶点是否落在目标边缘 -
coords列表中首尾点**不要重复**——现代浏览器自动闭合，强行写两遍（如"100,50,200,50,150,150,100,50"）在 Safari 和部分安卓 WebView 中会解析失败
usemap="#xxx" 和 map name="xxx" 配对失败的典型表现
90% 的“点击没反应”不是 JS 问题，而是 HTML 关联断裂。浏览器不报错，但整个 <map></map> 完全被忽略。
常见错误：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
usemap="floorplan"漏了#前缀 → 必须是usemap="#floorplan" -
<map name="FloorPlan"></map>大小写不一致 →name值必须和usemap的#后完全一致（"floorplan"≠"FloorPlan"） -
name含中文、空格或下划线 → 只允许小写字母、数字、短横线，例如name="product-1"合法，name="product_1"在部分旧浏览器中失效 -
<map></map>放在<div> 里嵌套过深，或放在 <code><img alt="HTML不规则多区域映射怎么做？复杂热区制作流程" >标签内部 →<map></map>必须与<img alt="HTML不规则多区域映射怎么做？复杂热区制作流程" >同级，且在 DOM 中位于其后（或至少在同一父容器内）响应式页面里热区怎么保准
原生
<map></map>的坐标是硬编码像素值，CSS 缩放、width: 100%、max-width一加，热区就全偏。这不是 bug，是规范行为。可行解法只有三个，没有中间路线：
- 用
rwd-image-maps库：图片加载完后自动按缩放比重算所有coords，但需确保图片已渲染（监听load事件，别在 DOM ready 就执行） - 改用 SVG：把原图转成
<svg></svg>+<image></image>+<path></path>或<rect></rect>，热区天然随缩放自适应，但放弃 CDN 缓存、增加首屏体积、无法直接复用 JPG/PNG - 固定图片尺寸 + 媒体查询多套
<map></map>：为 desktop / tablet / mobile 分别准备三张等比例缩放的图（如 1200×800 / 768×576 / 375×281），每套图配独立<map></map>和usemap，用@media控制显隐
移动端点不准的根本原因和底线要求
桌面能点中的热区，手机大概率点不中——不是坐标错了，是物理触控精度不够。Apple 和 Google 的无障碍规范强制要求：可点击区域最小物理尺寸 ≥ 44×44px（设备独立像素经 DPR 缩放后的实际显示尺寸）。
这意味着：
- 即使
coords算得再准，如果某个多边形热区在 iPhone 上渲染后宽度仅 30px，用户几乎必然点不中 - 不能只看 CSS 像素（
30px），要算真实物理尺寸：比如 iPhone 14 Pro 的 DPR=3，那 30px CSS 宽度 = 10pt = 实际约 260μm，远低于 44×44px 所需的最小触控面积 - 测试必须真机进行，Chrome DevTools 的 device emulation 无法模拟真实触控容错率
- 对紧凑布局的热区（如九宫格图标），宁可合并相邻区域、加 padding 区域，也不要死守视觉边界
- 用
