usemap与map name必须严格匹配（大小写敏感），area的shape和coords需格式一致，href和alt不可省略，响应式下热区失效需用SVG替代或保持原图尺寸。

usemap 和 map name 必须严格匹配，大小写敏感

绑定失败是“点不动”的第一原因。<img usemap="#floorplan" alt="HTML区域映射如何绑定不同跳转链接" > 中的 #floorplan 必须和 <map name="floorplan"></map> 的 name 完全一致——不能多空格、不能大小写混用（#FloorPlan ≠ floorplan），也不能漏掉开头的 #。

常见错误包括：

• 复制粘贴时带了中文标点或不可见字符
• 把 name 写成 id 或 class
• <map></map> 放在 外（比如误塞进 ）

area 的 shape 和 coords 格式必须一一对应

每个 <area> 的 shape 决定了 coords 应该有几个值、怎么解释。手填错一个数，整个热区就偏移或失效。

正确写法示例：

立即学习“前端免费学习笔记（深入）”；

<area shape="rect" coords="50,30,180,120" href="/room/101">
<area shape="circle" coords="320,150,40" href="/room/202">
<area shape="poly" coords="10,200,60,190,70,240,20,250" href="/lobby">

注意：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• rect：4 个值，顺序是 left,top,right,bottom（不是宽高）
• circle：3 个值，center-x,center-y,radius
• poly：偶数个值，每两个为一组 x,y 坐标，至少 3 组（6 个数）
• 所有坐标单位是像素，基于图片原始尺寸（非 CSS 缩放后尺寸）

跳转链接需显式声明 href，alt 不可省略

<area> 不像 <a></a> 有默认样式或行为，没写 href 就完全不响应点击；没写 alt 则违反可访问性规范，屏幕阅读器无法播报该区域用途。

建议写法：

<area shape="rect" coords="100,50,200,100" href="/admin" alt="管理员入口" target="_blank">

关键点：

• href 必须存在，哪怕只是 href="#"（但应配合 JS 阻止默认行为）
• alt 是强制要求，不是“可选优化”
• target="_blank" 可按需添加，但记得加 rel="noopener" 防安全风险

响应式下热区会失效，别只靠静态 coords

只要对 <img alt="HTML区域映射如何绑定不同跳转链接" > 用了 width: 100% 或 max-width，原始像素坐标就立刻错位。浏览器不会自动缩放 coords。

可行解法只有两个：

• 放弃响应式缩放，用原图尺寸 + max-width: 100% + height: auto 保比例（最简单，但移动端可能过大）
• 改用 <svg></svg> 替代 —— 矢量坐标天然适配缩放，支持 hover、JS 事件、无障碍更友好

硬用 JS 动态重算 coords 成本高、精度差、移动端 touch 坐标难对齐，不推荐作为首选方案。