HTML - map 标签

HTML<map> 标签用于定义图像映射，以在图像上创建可点击区域。这对于增强网站的交互性是一个很好的帮助。

如果我们想使图形更具交互性，我们可以使用图像映射。Wwe 可以在同一帧内的图像之间导航并与图像交互。当我们希望完成诸如放大网站图像之类的功能时，此功能很有帮助。每张图片上都会有一个可点击的区域，我们可以设置当用户点击该区域时重定向 URL 或其他图片。

语法


<map name="">...</map>

属性

<map> 标签支持 HTML 的全局属性和事件属性。以及下面列出的特定属性。

属性	值	描述
name	mapname	定义映射标记的唯一名称。

图像映射由 HTML、<area> 和 <map> 标签的组合定义。图像映射由具有可点击部分的图像组成;通过单击图像，将打开一个新窗口或指定位置。指定区域的位置和类型的 <area> 元素可能包含多个实例。在不分离图像的情况下，您可以使用 <map> 元素快速将图像的任何部分链接到其他文档。

<map> 标签示例

下面的例子将说明地<map> 标签的用法。在哪里、何时以及如何使用<map> 标签，以及我们如何使用 CSS 操作地图元素。

<map> 标签在图像上映射

让我们看一下以下示例，我们将在其中使用 <map> 标签并通过指定链接导航到另一个页面。


<!DOCTYPE html>
<html>
   <body>
   <h3>HTML map Tag</h3>
   <img src="/cg/images/logo.png"
        alt="Workplace"
        usemap="#workmap"
        width="400"
        height="70">
   <map name="workmap">
      <area shape="rectangle" 
            coords="33,45,271,300"
            alt="tutorial" 
            href="/index.htm">
   </map>
</body>
</html>

使用 <map> 标签导航图像

考虑另一种情况，我们将使用 <map> 标签导航到同一帧中的另一个图像。


<!DOCTYPE html>
<html>
<body>
   <center>
      <p>Click on Images where the cursor clickable.
      </p>
      <img src="/cg/images/logo.png"
           alt="logo" usemap="#tutorial">
      <map name="tutorial">
         <area shape="rect"
         coords="0, 0, 52, 52"
         alt="tutorial"
         href="/html/images/html.jpg">
      </map>
   </center>
</body>
</html>

支持的浏览器

浏览器
<map>	Yes	Yes	Yes	Yes	Yes

打印本页