您现在的位置是：网站首页 > <area> ：图像映射的创建文章详情

<area> ：图像映射的创建

陈川【 HTML 】 30160人已围观

在网页设计中，图像映射是一种将一个图像分割成多个区域，用户点击这些区域时可以触发不同的动作。这通常用于地图、图标或需要用户选择特定部分的图像上。HTML 的 <area> 标签正是用来实现这一功能的。下面将详细介绍如何使用 <area> 标签来创建图像映射，并提供一个简单的示例代码。

基本语法与属性

HTML `<area>` 标签的基本结构：

<img src="image.jpg" alt="描述文字" usemap="#mapname">
<map name="mapname">
  <area shape="rect" coords="x1, y1, x2, y2" href="链接URL" />
  <!-- 可以添加多条 area 元素 -->
</map>

src 属性：指定图像的 URL。
alt 属性：提供图像的替代文本，当图像无法加载时显示。
usemap 属性：定义一个名为 mapname 的映射区域，这个名称需要和 <map> 标签中的 name 属性匹配。
shape 属性：定义区域的形状，支持 rect（矩形）、circle（圆形）和 poly（多边形）。
coords 属性：定义区域的位置和大小。对于矩形区域，它是一个由四个逗号分隔的坐标列表，依次是左上角的 X 和 Y 坐标，右下角的 X 和 Y 坐标。
href 属性：当用户点击该区域时触发的链接地址。

示例代码

下面是一个使用 <area> 标签创建图像映射的示例代码。假设我们有一个名为 world-map.png 的世界地图图片，我们将创建三个区域，分别对应欧洲、亚洲和美洲，并为每个区域设置链接。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像映射示例</title>
</head>
<body>

<!-- 创建一个图像映射 -->
<img src="world-map.png" alt="世界地图" usemap="#worldMap">
<map name="worldMap">
  <!-- 欧洲区域 -->
  <area shape="rect" coords="0,0,200,150" href="europe.html" title="欧洲">
  <!-- 亚洲区域 -->
  <area shape="rect" coords="250,0,450,150" href="asia.html" title="亚洲">
  <!-- 美洲区域 -->
  <area shape="rect" coords="500,0,700,150" href="america.html" title="美洲">
</map>

</body>
</html>