HTML - <map> 标签

HTML <map> 标签用于定义图像地图，以便在图像上创建可点击区域。这对于增强网站的交互性非常有用。

如果我们想让图形更具交互性，我们可以使用图像映射。我们可以导航同一框架内的图像并在图像中进行交互。当我们希望实现诸如放大网站图像的功能时，此功能非常有用。每个图像上都会有一个可点击区域，我们可以设置 URL 或其他图像，以便在用户点击该区域时重定向。

语法

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

属性

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

属性	值	描述
name	mapname	定义地图标签的唯一名称。

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

HTML map 标签示例

下面的示例将说明 map 标签的用法，以及何时何地以及如何使用 map 标签以及如何使用 CSS 操纵 map 元素。

图像映射

让我们来看下面的例子，我们将使用 <map> 标签并通过指定链接导航到另一个页面。

<!DOCTYPE html>
<html>
   <body>
   <h3>HTML map Tag</h3>
   <img src="https://tutorialspoint.com/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="https://tutorialspoint.com/index.htm">
   </map>
</body>
</html>

使用 map 标签导航图像

考虑另一种情况，我们将使用 <map> 标签在同一框架内导航到另一个图像。

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

支持的浏览器

标签
map	是	是	是	是	是

html_tags_reference.htm

打印页面