📌  相关文章
📜  HTML |<img>用户映射属性(1)

📅  最后修改于: 2023-12-03 15:01:14.905000             🧑  作者: Mango

HTML | 用户映射属性

1. 引言

在HTML中，标签通常用于插入图像。然而，很少有人了解到和标签，这两个标签可以用于创建用户映射。用户映射是指点击图像的特定区域（通过标签定义） 可以链接到另一个网页或执行其他操作的特定操作的技术。在这篇文章中，我们将深入探讨和标签。

2. 标签

标签用于定义用户映射。这个标签仅有一个必需的属性，即name。该属性用于指定映射的名称。例如：

<map name="myMap">
...
</map>
3. 标签

标签被用于定义图像上的区域。它可以在标签中被使用。这个标签必须嵌套在标签中，且需要指定一些必需的属性，包括：shape、coords和href。例如：

<area shape="rect" coords="100,200,300,400" href="http://www.example.com">

这个例子定义了一个矩形区域，从点(100,200)开始，到点(300,400)结束。当用户单击这个区域时，将打开一个新窗口，显示http://www.example.com这个网站。

4. 构建用户映射

一旦我们知道如何定义和标签，我们就可以开始构建用户映射了。一个完整的映射应该包括以下步骤：

  1. 定义图像和映射名称：
<img src="myImage.jpeg" usemap="#myMap">
<map name="myMap">
...
</map>
  1. 定义一个或多个区域：
<map name="myMap">
  <area shape="circle" coords="150,150,50" href="http://www.example.com">
  <area shape="poly" coords="110,10, 310,10, 215,105" href="http://www.example.com">
  <area shape="rect" coords="50,200,250,400" href="http://www.example.com">
</map>

这个例子定义了3个不同的区域，每个区域都对应一个链接地址。圆形区域（shape=“circle”）定义了一个圆形，指定了中心点(150,150) 和半径(50)。多边形区域（shape=“poly”）定义了一个三角形，指定了3个坐标点。矩形区域（shape=“rect”）定义了一个矩形，指定左上角和右下角的坐标。

5. 总结

和标签提供了一种创建用户映射的方法，在图像上定义多个区域。这些区域可以被单独点击，并且每个区域都链接到不同的目标页面或执行不同的操作。当您需要在网页中实现互动性和交互性时，请考虑使用用户映射。

6. 参考