1. 什么是 <map> 元素
<map> 元素是 HTML 中用于定义图像映射（image map）的核心标签。它允许你在同一张图片上划分多个可点击区域，每个区域可以链接到不同的目标地址。简单来说，它让一张图片拥有多个"热点"链接，而不是只能整体作为一个链接。
一个典型的图像映射由两部分组成：
2. 基本语法与结构
<img src="map.jpg" alt="示例地图" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域一">
<area shape="circle" coords="200,200,50" href="page2.html" alt="区域二">
<area shape="poly" coords="300,0,400,0,350,100" href="page3.html" alt="区域三">
</map>
关键属性说明
| 属性 | 作用 |
|---|---|
name | <map> 元素的唯一名称，供 usemap 引用 |
usemap | <img> 元素上引用 <map> 的锚点，格式为 #名称 |
shape | 定义区域形状：rect（矩形）、circle（圆形）、poly（多边形） |
coords | 定义区域坐标，不同形状的坐标格式不同 |
href | 点击区域后跳转的链接地址 |
alt | 区域的替代文本，增强可访问性 |
3. 三种形状的坐标详解
3.1 矩形（rect）
矩形需要四个坐标值：左上角 x、左上角 y、右下角 x、右下角 y。
<area shape="rect" coords="10,20,150,120" href="rect.html" alt="矩形区域">
3.2 圆形（circle）
圆形需要三个坐标值：圆心 x、圆心 y、半径。
<area shape="circle" coords="100,100,40" href="circle.html" alt="圆形区域">
3.3 多边形（poly）
多边形需要至少三组坐标，每组为 x、y 值，按顺序连接成闭合图形。
<area shape="poly" coords="50,50,150,50,100,150" href="poly.html" alt="三角形区域">
4. 完整实战示例
下面是一个完整的图像映射示例，模拟一张"办公室平面图"：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>办公室平面图</title>
</head>
<body>
<h1>点击查看各部门信息</h1>
<img src="office-map.png" alt="办公室平面图" usemap="#office">
<map name="office">
<area shape="rect" coords="0,0,200,150" href="sales.html" alt="销售部">
<area shape="rect" coords="200,0,400,150" href="tech.html" alt="技术部">
<area shape="circle" coords="300,250,60" href="meeting.html" alt="会议室">
<area shape="poly" coords="0,150,200,150,100,300" href="hr.html" alt="人事部">
</map>
</body>
</html>
5. 使用技巧与注意事项
5.1 坐标获取方法
获取图片上各区域的精确坐标，可以使用以下方法：
- 使用图片编辑软件（如 Photoshop）查看光标位置
- 使用浏览器开发者工具直接测量
- 使用在线图像映射生成工具辅助创建
5.2 可访问性建议
- 始终为
<area>提供alt属性，方便屏幕阅读器用户 - 确保每个区域都有明确的视觉反馈（如 hover 效果）
- 考虑为键盘用户提供替代导航方式
5.3 常见问题
Q：为什么点击区域没有反应？
A：最常见的原因是 usemap 的值与 name 不匹配。请检查 <img> 上的 usemap="#名称" 是否与 <map name="名称"> 完全一致。
Q：区域重叠时哪个优先？
A：当多个区域重叠时，先定义的区域优先响应点击。
6. 总结
<map> 元素是 HTML 中实现图像映射的标准方式，通过配合 <area> 元素，可以在单张图片上创建多个可交互区域。虽然现代 Web 开发中更倾向于使用 SVG 或 Canvas 实现复杂交互，但 <map> 元素凭借其简单、轻量、兼容性好的特点，在特定场景下仍然非常实用。
掌握 <map> 元素的核心在于理解三种形状的坐标系统，以及 usemap 与 name 的正确关联方式。希望本文能帮助你快速上手图像映射的开发。
转载自 CSDN-专业IT技术社区
