HTML 中的地图标签

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

语法

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543817072066.jpg?x-oss-process=image/resize,p_40" class="lazy" usemap="new-map" alt="HTML 中的地图标签" >
<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

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

代码：

<title> Image map Example </title>


<p> Click on the image to see the clickable area on it </p>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543817072066.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Rectangle Shape" usemap="#new-map">
<map name="new-map">
<area shape="rect" coords="91,70,290,160" alt="Rectangle" href="#">
</map>

输出：

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

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

示例#2

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

代码：

<title> Image map Example </title>


<p> Click on the image to see the clickable area on it </p>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543817595031.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Circle Shape" usemap="#new-map">
<map name="new-map">
<area shape="circle" coords="111,87,62" alt="Circle" href="#">
</map>

输出：

点击图片时：

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

示例 #3

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

代码：

<title> Image map Example </title>


<p> Click on the image to see the clickable area on it </p>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543818052895.jpg?x-oss-process=image/resize,p_40" class="lazy" 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>

输出：

因此，我们在原始图像的矩形上有五边形的子部分。请注意，我们可以通过调整坐标值来实现任何类型的可点击区域。

可点击区域：

结论

所以，我们已经了解了什么是地图标签以及它是如何使用的。 map 标签用于客户端图像映射。我们可以使用地图标签将图像的特定区域定义为可点击。我们可以通过根据需要提供有效坐标来实现任何形状。

以上是HTML 中的地图标签的详细内容。更多信息请关注PHP中文网其他相关文章！