直接用+实现图像热区需严格配对usemap与name（含#、大小写、符号全一致），coords基于原始图片像素尺寸，不响应css缩放；rect需4值、circle需3值、poly需成对坐标；缺href或alt、坐标越界、usemap漏#均导致静默失效。

直接用 <map></map> + <area> 就能实现，但必须配对 usemap 属性，且坐标系固定、不响应式——这不是“加个点击效果”，而是定义原生热区，错一个字符或坐标就失效。

怎么写 <map></map> 和 <area> 才不白忙

<map></map> 是容器，<area> 是具体热区；name 必须和 usemap 的值严格一致（带 # 前缀），大小写敏感：

• <img src="plan.png" usemap="#floorplan"> → 对应 <map name="floorplan"></map>，不是 "FloorPlan" 或 "floor-plan"
• shape 决定 coords 格式：rect 要 4 个值（左、上、右、下），circle 要 3 个（圆心 x,y + 半径），poly 是成对的 x,y 坐标序列
• 所有坐标基于图片原始像素尺寸，缩放后热区会偏移——别指望 CSS width: 100% 下还能点准

为什么点不到？常见坐标和绑定错误

浏览器不会报错，但点击无反应，90% 出在以下三处：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• usemap 值漏了 #：写成 usemap="floorplan" 而非 usemap="#floorplan"，完全不关联
• <area> 缺 href 或 alt：没有 href 就不可点击；没 alt 会导致无障碍检测失败，部分浏览器/读屏器直接忽略该区域
• 坐标超出图片边界：比如图片宽 800px，却写 coords="0,0,900,100"，右半部分热区实际无效

响应式图片热区怎么保活

原生 <map></map> 不适配缩放，硬调 coords 不现实。真要适配，只有两条路：

• 用 JS 库如 rwd-image-maps：加载后自动按比例重算所有 <area> 的 coords，需确保图片加载完成后再执行
• 换 SVG：把图片转为 SVG，用 <svg></svg> + <use></use> 或 <path></path> 定义热区，天然矢量缩放，但得放弃 <img> 标签和 CDN 缓存优势

替代方案比死磕 <map></map> 更靠谱的场景

如果热区形状复杂、要动画、或需支持触摸反馈，<map></map> 反而拖累开发：

• 纯视觉热区（比如 banner 上几个图标）：用绝对定位 <a></a> 叠在图片上，配合 pointer-events: none 控制穿透
• 需要 hover/focus 状态：SVG 或 Canvas 更可控，<area> 不支持伪类
• 动态生成热区（如地图标记）：直接用 <div> + <code>position: absolute + JS 绑定事件，坐标可实时计算

  真正麻烦的不是写几行 HTML，而是坐标一旦嵌进代码，就和图片像素强绑定——换图、改尺寸、切图压缩，全得重新量一遍。