28. 图像地图 map 与 area

图像地图（Image Map）允许你在一张图片上定义多个”热点”，每个热点跳转到不同的地方。比如一张中国地图，点击每个省份弹出对应的介绍页面。

基本结构

图像地图需要三部分配合：

1. <img> 图片，加上 usemap 属性指向地图名称
2. <map> 容器，用 name 属性匹配图片
3. <area> 定义每个热区的形状、坐标和链接

<img src="map.png" alt="产品示意图" usemap="#product-map" />

<map name="product-map">
  <area shape="rect" coords="10,10,100,80" href="cpu.html" alt="处理器" />
  <area shape="circle" coords="200,150,40" href="gpu.html" alt="显卡" />
</map>

area 的 shape 属性

shape 决定热区的形状，有四种取值：

shape 值	含义	coords 需要
rect	矩形	左上角x, 左上角y, 右下角x, 右下角y
circle	圆形	圆心x, 圆心y, 半径
poly	多边形	x1,y1, x2,y2, x3,y3, ...
default	整张图片剩余区域	不需要 coords

坐标原点 (0,0) 在图片的左上角，单位是像素。

矩形热区示例

<map name="products">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="laptop.html"
    alt="笔记本电脑"
    title="查看详情" />
</map>

矩形只需要两个点：左上角和右下角。

圆形热区示例

<area
  shape="circle"
  coords="150,120,50"
  href="ball.html"
  alt="球类运动" />

三个值：圆心 x、圆心 y、半径。

多边形热区示例

多边形适合不规则形状。每对值是一个顶点的坐标。

<area
  shape="poly"
  coords="34,45, 55,25, 85,35, 95,70, 65,95, 30,80"
  href="region.html"
  alt="特殊区域" />

按顺序连接这些点，自动闭合成多边形。

area 的 href 和 alt

<area> 的 href 和 <a> 一样，支持相对路径、绝对路径、锚点等。

alt 是必填属性——屏幕阅读器靠它告诉用户这个热区是什么。如果图片本身已经有描述性 alt，而 <area> 没有 href（纯装饰热区），可以写 alt=""。

<area shape="rect" coords="0,0,50,50" href="page.html" alt="" />

图像地图的缺点

听起来很实用，但实际项目中用得越来越少。

• 坐标维护成本高：图片尺寸一变，坐标全废。
• 移动端适配困难：不同屏幕大小，固定坐标会错位。
• 无障碍问题：热区不容易被键盘和屏幕阅读器识别。
• SEO 不友好：不如文字链接容易被搜索引擎理解。

什么时候用图像地图

少数场景确实适合：

• 解剖图（点击器官查看详情）
• 世界/区域地图（点击国家）
• 产品爆炸图（点击零件编号）

现代替代方案

如果需要响应式的热区效果，考虑用 SVG 代替：

<svg viewBox="0 0 400 300">
  <a href="page1.html">
    <rect x="10" y="10" width="80" height="60" fill="transparent" />
  </a>
  <a href="page2.html">
    <circle cx="200" cy="150" r="40" fill="transparent" />
  </a>
</svg>

SVG 热区会随图片一起缩放，不需要固定坐标。这属于进阶内容，后续 SVG 章节会详细讲。

本章小结

标签	作用
<img usemap="#name">	声明使用哪个图像地图
<map name="name">	定义地图容器
<area>	定义一个热区（shape + coords + href + alt）

图像地图是个”老手艺”，知道它能做什么就行。实际项目中优先考虑 CSS 或 SVG 方案。

下节我们学习语义化的导航标签 <nav>。