HTML原生唯一标准方案是配合和，需严格配对usemap="#name"与（大小写敏感、#仅在usemap中），coords基于原始像素且为整数，不随缩放自适应。

直接用 标签本身无法定义可点击区域，必须配合 和 才能实现——这是 HTML 原生唯一标准方案，不依赖 JavaScript，但坐标固定、无响应式能力。

usemap 和 name 怎么配对才有效

核心是严格匹配： 中的 #cn-map 必须和 的 name 完全一致（大小写敏感，# 只出现在 usemap 值里， 的 name 里不能带 #）。

常见错误：

• usemap="cn-map"（漏了 #）→ 不生效
• （大小写不一致）→ 断连
• 写在 后面但不在同一文档流（比如被 JS 动态插入且未触发重解析）→ 失效

coords 坐标怎么取才准、怎么写才合法

坐标单位是像素，原点在图片左上角 (0,0)，所有值必须是整数，不能有小数、负数或空格（逗号后只允许一个英文逗号，不能多空格）。

不同 shape 的格式要求：

• rect：coords="x1,y1,x2,y2"（左上 → 右下，x1
• circle：coords="cx,cy,r"（圆心 x、y + 半径 r，r > 0）
• poly：coords="x1,y1,x2,y2,x3,y3,..."（偶数个整数，按顺时针或逆时针列顶点，首尾不重复）

别手估、别截图量。推荐做法：

• 在线工具：Image Map Generator（上传图→画区域→自动输出 HTML）
• 本地插件：VS Code “Image Map” 插件，支持实时取点并校验 poly 点数是否为偶数
• 浏览器调试：用开发者工具选中 ，看 getBoundingClientRect() 是否贴合目标区域

为什么图片一缩放热区就点不准

因为 的 coords 是绝对像素值，绑定的是原始图片尺寸；只要 被 CSS（如 width: 100%、max-width）或属性（width/height）缩放过，热区就立刻偏移。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

三种应对方式（按推荐顺序）：

• 最稳：图片保持原始尺寸显示，用 background-image +
  绝对定位模拟热区（但失去原生 href 跳转和屏幕阅读器支持）
• 折中：JS 监听 resize，按 img.clientWidth / img.naturalWidth 算缩放比，动态重写 area.coords（需缓存原始坐标，且要按 shape 分支处理）
• 真要响应式 + 拖拽 + 高亮：直接换 SVG 或 Leaflet —— 不是为此设计的

href 跳转失败的几个硬坑

的 href 不支持纯锚点跳转（如 href="#section1"），会静默失败。

必须是有效 URL：

• ✅ 正确：href="./page.html#detail"、href="https://example.com"、href="javascript:void(0)"
• ❌ 错误：href="#top"（无当前页上下文）、href="index.html#"（末尾多 #）

另外两个易忽略点：

• 每个 必须带 alt 属性，否则无障碍访问失败，SEO 也受损
• 多个 重叠时，DOM 顺序靠后的会覆盖前面的（z-index 无效），点击行为取决于渲染层叠顺序

真正难的不是写对标签，而是坐标一旦写死，就和图片尺寸强耦合；后续改图、换尺寸、加响应式，几乎必然要重算 coords —— 这个维护成本，常被初学者低估。