HTML - 图像映射

HTML 中的图像映射使图像的特定区域可单击，充当指向不同目的地的链接。此技术可用于在网页上创建复杂的导航系统或交互式图形。

通过在图像中定义各种形状（矩形、圆形、多边形），每个形状都有自己的关联链接，开发人员可以创建动态和交互式的视觉内容，从而增强用户参与度和导航。

为什么要使用图像映射？

HTML 中的图像映射通过定义图像中的可单击区域来有效地创建交互式图形。这允许用户与不同的图像部分进行交互，从而触发特定的操作或链接。

图像映射可用于创建复杂的导航、交互式图表或引人入胜的视觉体验，从而增强用户在网页上的参与度和交互性。

HTML <map> 标签

在 HTML 中，<map> 标签用于创建客户端图像映射，将图像的特定区域转换为交互式元素。这允许用户单击图像的不同区域，触发各种操作。<map> 元素用作 <area> 元素的容器，每个元素定义一个具有特定属性的可单击区域。


<map name="world map">
	 <!-- 在此处定义您的可点击区域 -->
</map>

当与 <img> 标签结合使用时，<map> 标签会在图像与其关联的地图之间建立连接。这使 Web 开发人员能够通过在图像中定义不同的可点击区域来创建动态和交互式内容。

HTML <area> 标签

HTML 中的 <area> 标记在 <map> 元素中用于定义图像上的可点击区域。它指定每个可单击区域的形状、坐标和关联的操作。

语法


<area shape="shape_values" coords="coordinates" href="url" alt="描述">

矩形区域

如果需要矩形区域，我们必须传递“rect”作为值。矩形需要左上角和右下角的坐标。


<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="描述">

x1、y1：左上角的坐标。
x2、y2：右下角的坐标。

圆形区域

如果需要圆形区域，我们必须将“圆形”作为值传递。圆需要中心坐标和半径。


<area shape="circle" coords="x,y,r" href="url" alt="描述">

x、y：圆心的坐标。
R：圆的半径。

多边形面积

如果需要任何多边形形状的区域，我们必须将“poly”作为值传递。多边形需要一系列坐标来形成形状。这可以用来创建任何形状，无论是芒果还是苹果。


 <area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" href="url" alt="描述">

其中， x1， y1， ...， xn， yn：构成多边形的坐标。

这些形状可以创建交互式图像地图，通过将不同的操作与图像中的特定区域相关联来增强用户参与度。

HTML 图像映射

若要在 HTML 中创建图像映射，请使用代码示例执行以下步骤。

第 1 步 - 准备映像：从要转换为图像映射的图像开始。在此示例中，让我们使用名为“.jpg”的图像。
第 2 步 - 定义图像映射：使用 <map> 标签定义图像映射，并使用 name 属性为其指定唯一名称。
第 3 步 - 定义可点击区域：在 <map> 元素中，您可以使用 <area> 标签定义可点击区域。指定形状（矩形、圆形或多边形）、坐标和要链接到的 URL。

下面是一个具有可单击矩形的示例。

对要在图像中创建的每个可单击区域重复步骤 3。关闭 HTML 文件并使用扩展名保存.html。


<!DOCTYPE html>
<html>
<head>
		<title>图像映射示例</title>
</head>
<body>
		<img src=
"https://www.qikepu.com/images/logo.png" 
				 usemap="#image_map">
		<map name="image_map">
			<!-- 在此处定义您的可点击区域 -->
			<area shape="circle" coords="45,32,49" 
						href="index.htm" alt="七科普">
			<area shape="rect" coords="245,50,85,9" 
						href="index.html" 
						alt="QikepuCom_library">
	 </map>
</body>
</html>

执行上述示例时，将显示一个带有七科普 Logo的页面。如果您单击Logo中的圆圈，页面将被重定向到 启科普 的主页，如果您单击“教程”（矩形区域图），您将被重定向到我们的教程库。

您可以添加更多“<区域>元素，以在图像上创建不同的可点击区域，并根据您的要求将它们连接到不同的 URL 或操作。这为您的网站访问者提供了交互式体验。

打印本页