和是唯一原生支持图像热区映射的HTML方案，需usemap与name严格匹配（含#前缀、大小写敏感）、coords基于原始像素尺寸、href符合硬限制（如不支持纯锚点），否则点击无效。
<map></map> 和 <area> 是唯一原生支持地图区域映射的 HTML 方案，但必须三件套齐备、坐标精准、链接合法，否则点击无效。
usemap 与 name 必须严格匹配且带 #
这是最常卡住的第一步。浏览器不会报错，但热区完全不响应。
-
<img usemap="#cn-map" alt="HTML怎么给地图设置区域映射" >中的#cn-map必须和<map name="cn-map"></map>的name完全一致（大小写敏感，不能多空格） - 漏掉
#前缀 —— 浏览器直接忽略映射 - name 值含特殊字符（如点、下划线以外的符号）可能在旧版 IE 中失效，建议只用字母、数字、短横线
- 一个
<map></map>可被多张图复用，但每张图只能关联一个usemap
coords 坐标不准 = 点不中，不是 JS 问题
所有 <area> 的 coords 都是基于图片原始像素尺寸的绝对坐标。缩放、CSS width、响应式布局都会让它偏移。
- 矩形：
coords="x1,y1,x2,y2"（左上角 → 右下角），不是宽高；x2 必须 > x1，y2 > y1 - 圆形：
coords="cx,cy,r"，r 不能为 0 或负数 - 多边形：
coords="x1,y1,x2,y2,x3,y3,..."，点数必须为偶数，首尾不重复（浏览器自动闭合） - 别手算：用在线工具如 Image Map Generator 上传原图后画区域，直接复制 coords
- 调试技巧：临时加
style="outline: 2px solid red"到<img alt="HTML怎么给地图设置区域映射" >，对比原始尺寸是否被 CSS 拉伸
href 不跳转？检查这三类硬限制
<area> 的 href 行为比普通 <a></a> 更严格，很多看似合理的写法实际无效。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ❌
href="#section1"：纯锚点不触发跳转（除非页面已有对应 id 且 JS 干预） - ✅
href="./detail.html#beijing"、href="https://example.com"、href="javascript:void(0)"（需配合 JS） - nohref 属性表示该区域禁用链接，不要和 href 同时出现
- target 属性有效：
target="_blank"或target="iframe-name"，但 iframe 需提前定义 name - 移动端点击区域太小（
想响应式或高亮？<map></map> 本身做不到
原生 <map></map> 是静态声明式方案，没有内置 hover 样式、缩放适配或事件代理能力。
立即学习“前端免费学习笔记（深入）”；
- hover 效果必须靠 JS：监听
area的mouseenter/mouseleave，然后操作<img alt="HTML怎么给地图设置区域映射" >的style.filter或加 class - 图片缩放后热区偏移？JS 可监听
window.resize，按缩放比例重算coords并动态写回area.coords（需缓存原始坐标） - 真要拖拽编辑、矢量缩放、地理坐标映射 —— 直接换 SVG 或 Leaflet；
<map></map>不是为这些设计的 - 无障碍必须加
alt：<area alt="北京市辖区">，否则屏幕阅读器无法识别
