正在加载...

HTML 图像映射

Picture 元素是在多个图像文件之间做选择。图像映射（image map）则保留一张图像，并让其中的区域可点击——例如楼层平面图上的热点、示意图，或简单的图形菜单。你把带有 usemap 的 img 与充满 <area> 链接的 <map> 配对使用。

什么是图像映射

图像映射并不是一种单独的图像格式。它是一段 HTML，含义是：「图片上的这个矩形（或圆形、或多边形）应当表现得像一个链接。」视力正常的用户点击该区域；辅助技术则需要每个 area 上都有清晰的 alt，因为热点旁边可能没有可见文字。

直接回答

  1. 在 img 上添加 usemap="#mapname"。
  2. 添加带有一个或多个 <area> 元素的 <map name="mapname">。
  3. 每个 area 都需要 shape、coords、href 以及各自的 alt。
    usemap 上的 # 必须与 map 的 name 匹配（不要再发明第二种拼写）。

shape 取值一览

📊 area 的 shape 取值

shape 含义
rect 矩形 — coords：left, top, right, bottom
circle 圆形 — coords：centerX, centerY, radius
poly 多边形 — 按顺序排列的 x,y 点列表

简单的矩形映射

桌面布局上的两个热点就足以学会接线方式：usemap、匹配的 name，以及带有诚实 alt 文本的 area 矩形。

简单的矩形热点

html
HTML Code 
<img src="images/desk.png" alt="Desk layout" usemap="#deskmap" width="400" height="200">
<map name="deskmap">
<area shape="rect" coords="20,30,120,100" href="lamp.html" alt="Lamp">
<area shape="rect" coords="200,40,320,120" href="monitor.html" alt="Monitor">
</map>

如何阅读示例

  • 图像上的 usemap="#deskmap" 指向名为 deskmap 的映射
  • 每个 area 都是一个链接：href 是目标，alt 为热点命名
  • rect 的 coords 是图像像素网格中的 left、top、right、bottom
  • 图像自身的 alt（「Desk layout」）描述整幅图；area 的 alt 则为各个区域命名

坐标如何工作

坐标按为映射布局后的图像的 CSS 像素来测量。如果你在 img 上设置了 width 和 height，学习阶段请让 coords 与该显示尺寸保持一致。错误的数字会产生偏离所绘对象的热点——这是一种常见且不易察觉的失效。

无障碍习惯

每个可点击的 area 都需要有意义的 alt。不要留下未命名的热点。优先使用每个区域用途都清楚的映射。如果设计需要复杂的响应式行为，许多团队会改用带链接的 SVG 或独立按钮，而不是脆弱的像素映射。

映射何时有用——何时没用

映射适合带有少数稳定区域的单一示意图。当图像在多个断点之间自由缩放时就会别扭，因为经典的 coords 不会自动重写。对于现代响应式界面，可考虑独立的链接图像、CSS 布局或 SVG。即便如此，了解图像映射仍有帮助——当你接手旧页面或简单的教学演示时尤其如此。

circle 与 poly（简要说明）

circle 使用圆心与半径。poly 按顺序列出围绕自由形状的 x,y 点对。先用 rect 练习，直到 usemap / name 配对变得自然，再在练习图上尝试其他形状。

在编辑器中练习

  1. 使用一张简单的宽图，其中有两个明显区域。
  2. 创建一个带有两个 rect 区域的 map，分别链向两个小型练习页。
  3. 仔细把 usemap="#name" 与 map name="name" 对应起来（包括 #）。
  4. 点击每个区域并确认导航。
  5. 故意弄断一次名称匹配，观察失效的热点，然后再修好。
  6. 改进任何 alt 只写成「link」的 area。

常见错误

  • usemap / name 不匹配（忘记在 usemap 上写 #，或只改了一边的名字）
  • 每个 area 缺少 alt
  • coords 与真实图像尺寸或对象位置不一致
  • 在没有计划的情况下，把高度流体的响应式布局完全押在图像映射上
  • 只把唯一描述写在 img 上，而让各个区域没有标签

小结

  • 图像映射把 img + usemap + map + area 接在一起
  • 形状包括 rect、circle 和 poly
  • 每个区域都需要 href、alt、shape 和 coords
  • 保持名称匹配，并让 coords 诚实准确
  • 对于复杂的响应式 UI，考虑现代替代方案——但仍应学习映射，以应对旧页面和简单示意图

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程