如何在 HTML 中创建图像地图?

htmlfront end technologyweb development更新于 2024/7/25 9:48:17

为了在图像中创建可点击区域，我们使用图像地图，该地图定义为 <map> 标签，包含开始和结束标签。<map> </map>

<area> 标签定义图像内部的区域，并嵌套在 <map> 标签内。以下是属性 −

序号	属性和说明
1	alt 该区域的替代文本
2	coords 该区域的坐标
3	download 当超链接被点击时，目标将会下载已点击
4	shape 区域的形状
5	target URL 的打开位置

语法

以下是用于图像可点击区域的语法 −

<map>
   <area>
</map>

示例

以下示例在 HTML 中创建图像地图 −

<!DOCTYPE html>
<html>
<head>
   <title>HTML map Tag</title>
</head>
<body>
   <img src="https://www.cainiaomax.com/static/images/logo.png?v2" alt="HTML Map" border="1" usemap="#html" />
   <!-- Create Mappings -->
   <map name="html">
      <area shape="circle" coords="54,50,39" href="https://www.cainiaomax.com/biology-tutorials.htm" alt="Team" target="_self" />
   </map>
</body>
</html>

程序输出结果中，可点击部分显示为一个圆圈，坐标范围为 54,50,39，超出该范围则不显示。点击可点击部分后，将打开另一个页面 logo.html，如下所示:

使用图像映射，我们可以根据点击图像的位置执行不同的操作。创建图像映射需要一张图片以及一些描述可点击区域的 HTML 代码。可以使用 <img> 标签插入图片，与其他图片不同的是，这里我们必须添加 usemap 属性。

语法

在 <img> 标签中使用 usemap 属性 −

<img src="pic1.jpg" alt="flower" usemap="#flowermap">

在上述语法中，usamap 值以 # 标签开头，后跟 name ，用于在图片和图像之间建立关联。

在 HTML 中创建图片映射

我们只需在 HTML 的 <body> 标签中添加 <map> 元素即可创建图片映射。 <map> 标签用于创建图像地图，并通过 name 属性将其链接到图像，如下所示 -

<map name="flowermap">

注意 − name 属性的值必须与 <img> 标签中使用的 usemap 属性值相同。

在 HTML 中添加可点击区域

使用 <area> 标签可以创建可点击区域。对于可点击区域，我们还可以定义形状，可以选择以下任意形状 -

rect

rect 形状定义图像上的矩形区域。以下是 area 标签中 rect 属性的用法 −

<area shape="rect" coords="34,44,270,350" alt="Computer" href="logo.html">

poly

多边形定义图像上的多边形区域。以下是 area 标签内 poly 属性的用法 −

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,
270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

circle

圆形用于在图像上定义圆形区域。以下是 area 标签 − 内 circle 属性的用法。

<area shape="circle" coords="256, 300, 38" href="cup.htm">

default

default 用于定义图像上的整个区域。

我们还可以向放置可点击区域的形状添加坐标。

示例

如果我们要创建一个可点击的矩形区域，则必须执行以下代码。

<!DOCTYPE html>
<html>
<body>
   <h2>Using Image Maps in HTML</h2>
   <p>Click on the logo to go to a new page and read more about the topic:</p>
   <img src="https://www.cainiaomax.com/images/logo.png?v2" alt="Workplace" usemap="#workmap" width="400" height="150">
   <map name="workmap">
      <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.cainiaomax.com/index.htm">
   </map>
</body>
</html>