HTML 中的地图标签-html教程-PHP中文网

语法

HTML 中地图标签的属性

1.姓名

2.形状

3.坐标

4.链接

5.替代

在 HTML 中实现地图标签的示例

示例 #3

结论

首页

web前端

html教程

HTML 中的地图标签

PHPz

Sep 04, 2024 pm 04:22 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 为使网站更具交互性提供了强大的支持。 HTML 允许以最少的编码进行直观的设计。当我们想让图像更具交互性时，HTML提供了图像映射的功能。使用图像映射，我们可以与图像进行交互，并在同一帧中从一张图像跳转到另一张图像。当我们想要实现网站上的图片放大之类的功能时，这个功能就很有用了。图片上会有一个可点击的区域；我们可以配置当用户点击该区域时要重定向的 URL 或其他图像。

语法

<img src = " " usemap = "new-map" >
<map name = "new-map" >
. . . .
. . . .
</map>

登录后复制

地图标签的语法如上例所示。我们有两个标签，img 和 map。在地图标签中，我们将其命名为“new-map”。 img 标签将有 src，它将显示图像并注意它有一个名为 usemap 的属性。我们已使用 usemap 属性将地图名称传递给此 img 标签。在地图标签之间的空白区域中，我们将定义该区域的配置及其在图像上的链接。

HTML提供了“map”标签来实现图像映射的功能。这是一个非常简单的标签，通常与“img”标签一起使用。 img 标签将用于定义要显示的主图像或第一个图像。然后地图标签将用于定义区域和链接。 img 和 map 这两个标签将通过 name 参数链接在一起。

HTML 中地图标签的属性

以下是 HTML 中地图标签的前 5 个属性：

1.姓名

地图标签主要与“name”属性相关。 name 属性用于为该特定定义的映射提供名称。然后在 img 元素中使用该名称，以便它们可以链接在一起。使用此名称属性映射，标签将包含另一个元素。之间。代码如下所示。

代码：

<map name = "new-map" >
. . . .
<area shape = " " coords = " " href = " " alt = " " >
. . . .
</map>

登录后复制

area 元素定义图像中的可点击区域。一般来说，一个地图标签将包含多个区域。元素。然后，区域元素将具有形状、绳索、href 等属性，这些属性在定义图像映射时非常有用。我们可以使用这些属性来定义区域和相关图像。区域元素通常与地图标签一起使用，并且始终嵌套在地图标签内。 area 元素具有以下属性，这些属性在定义图像映射时非常重要且有用。

2.形状

该属性用于指定图像上可点击区域的形状。我们总共有四个与可用形状相关的值。

默认值： 将定义整个区域
circle：指定圆形
rect:指定矩形形状
poly: 指定多边形形状

3.坐标

此属性与 shape 属性一起使用来指定该区域在图像上的位置。该属性的值将根据指定的形状而变化。

4.链接

此属性用作 URL 将重定向到的 URL。仅单击由坐标定义的特定区域时，URL 将被重定向。

5.替代

此属性用于指定在图像不可用时要显示的替代文本。还有更多与区域标签相关的属性，但这些是理解使用地图标签所需的基本属性。

在 HTML 中实现地图标签的示例

这里是 HTML 中地图标签的示例，详细解释。

示例#1

让我们看看使用图像映射的矩形的简单示例。

代码：

<!DOCTYPE html>
<html>
<head>
<title> Image map Example </title>
</head>
<body>
<p> Click on the image to see the clickable area on it </p>
<img src = "rectangle.png" alt = "Rectangle Shape" usemap = "#new-map" >
<map name = "new-map" >
<area shape = "rect" coords = "91,70,290,160" alt = "Rectangle" href = "#" >
</map>
</body>
</html>

登录后复制

输出：

HTML 中的地图标签

如果我们点击矩形区域，它会显示可点击区域的边框，如下所示，

HTML 中的地图标签

请注意，由于我们尚未在 href 属性中提供有效的 URL，因此目前该 URL 不会被重定向。

示例#2

让我们用 Circle 尝试相同的示例。

代码：

<!DOCTYPE html>
<html>
<head>
<title> Image map Example </title>
</head>
<body>
<p> Click on the image to see the clickable area on it </p>
<img src = "circle.png" alt = "Circle Shape" usemap = "#new-map" >
<map name = "new-map" >
<area shape = "circle" coords = "111,87,62" alt = "Circle" href = "#" >
</map>
</body>
</html>

登录后复制

输出：

HTML 中的地图标签

点击图片时：

HTML 中的地图标签

请注意，形状类型已更改为圆形，并相应提供了坐标值。

示例 #3

让我们用多边形作为另一个图像的子部分来设计示例。

代码：

<!DOCTYPE html>
<html>
<head>
<title> Image map Example </title>
</head>
<body>
<p> Click on the image to see the clickable area on it </p>
<img src = "polygon.png" alt = "Polygon Shape" usemap = "#new-map" >
<map name = "new-map" >
<area shape = "poly" coords = "166,45,217,80,197,134,139,134,119,79" alt = "Polygon" href = "#" >
</map>
</body>
</html>

登录后复制

输出：

HTML 中的地图标签