HTML 的 `<map>` 和 `<area>` 图像映射还有用吗

结论：<map> 和 <area> 图像映射没有死，浏览器至今完整支持，但它已经从「做可点击图片的标准方案」退化成「只在纯静态、图片不缩放、无 JS 的老系统里才值得用」的边缘工具。新项目要做图片热区，优先选内联 SVG 或 CSS 绝对定位锚点。

<map> 和 <area> 现在还能用吗？

能用，而且是 HTML 规范里依然有效的一等公民。写法是给 <img> 加 usemap="#名字"（注意必须带 #），再用同名的 <map name="名字"> 包住若干 <area>：

<img src="floorplan.png" width="600" height="400"
     usemap="#floor" alt="一层平面图">
<map name="floor">
  <area shape="rect"   coords="0,0,120,80"      href="/meeting" alt="会议室">
  <area shape="circle" coords="200,150,40"      href="/pantry"  alt="茶水间">
  <area shape="poly"   coords="300,20,420,20,420,90,300,90" href="/print" alt="打印区">
</map>

shape 有四种取值：rect（x1,y1,x2,y2）、circle（圆心 x,y,半径 r）、poly（多边形顶点依次排列）、default（覆盖整张图，必须放在最后兜底）。坐标单位是像素整数，不支持百分比，这是后面所有麻烦的根源。

图像映射最大的坑是什么？为什么响应式布局下会失效

结论：coords 是写死的像素值，一旦图片被 CSS 缩放，热区就会整体错位，这是图像映射在现代页面上最致命的缺陷。

典型场景：图片原始宽度 800px，你写了 max-width:100%，在 375px 的手机上图片被压到 375px，缩放比 0.47，但热区还按 800px 坐标系在算，点击「会议室」很可能命中「打印区」甚至落空。

三种处理方式，按推荐度排序：

1. 换方案——用内联 SVG，坐标随 viewBox 自动缩放，这是最省心的。
2. 加 JS 重算——图片尺寸变化时按比例重写所有 coords，社区有 image-map-resizer 这类老库，代价是多一个依赖、首屏可能闪烁。
3. 锁死图片——给容器固定宽高、禁止缩放，用 overflow:auto 兜底小屏。适合后台管理这类桌面场景。

图像映射和 SVG 链接有什么区别，该选哪个

结论：同样的「图片上放多个可点区域」，SVG 在缩放、无障碍、样式控制三项上全面胜出，唯一劣势是代码稍长。

<svg viewBox="0 0 600 400" role="img" aria-label="一层平面图">
  <image href="floorplan.png" width="600" height="400"/>
  <a href="/meeting">
    <rect x="0" y="0" width="120" height="80" fill="transparent"/>
    <title>会议室</title>
  </a>
  <a href="/pantry">
    <circle cx="200" cy="150" r="40" fill="transparent"/>
    <title>茶水间</title>
  </a>
</svg>

SVG 的优势是实打实的：viewBox 让坐标体系跟着容器缩放，不需要任何 JS；<title> 会被读屏软件朗读；fill、stroke、:hover、:focus-visible 都能用 CSS 控制；还能做路径动画和高亮效果——这些图像映射一样都做不到。

无障碍上，图像映射为什么是减分项

结论：读屏软件会把 <area> 当成一串普通链接念出来，用户听到的是「会议室 链接、茶水间 链接、打印区 链接」，完全丢失了「在图上哪个位置」的空间信息，同时视觉障碍用户也无法从图片本身获得上下文。

若坚持使用，两个硬性要求：一是有 href 的 <area> 必须写 alt（HTML 规范强制），二是 <img> 的 alt 要描述整张图，不能留空。另外热区尺寸别做太小——WCAG 2.2 的 SC 2.5.8 要求点击目标至少 24×24 CSS 像素，Apple 人机界面指南建议 44×44 pt，手指点击场景下热区小于 40px 基本就是给用户添堵。

顺带一提，<area> 在现代浏览器里可以用 Tab 聚焦，但默认焦点轮廓很弱，建议自己写 area:focus-visible { outline: 3px solid #0af; }。

什么情况下仍然值得用图像映射

结论：三类场景。一是不能跑 JS 的静态托管页面（比如纯 HTML 的文档站、内网静态报告）；二是不想引入 SVG 编辑工具链、只想手写几行 HTML 的老后台；三是需要给一张位图按原图像素精确切分几十个细碎区域，且明确只在桌面端固定尺寸下使用。

反过来，邮件模板不要指望它——多数邮件客户端会清理或忽略 map/usemap；移动端优先的产品也别用，触屏没有 hover，热区又小，体验很差。

收个尾：图像映射是一项「浏览器支持仍在、但工程价值已被替代」的技术。判断标准很简单——如果你的图片永远按原始像素尺寸展示、页面不需要 JS、也不追求无障碍满分，那它依然是最短的实现路径；只要沾上响应式、可访问性或交互动效任意一条，请直接上 SVG。