HTML - <area> 标签

HTML <area> 标签指定图像中可点击或可通过超链接链接到的活动区域。它将执行某些操作，例如打开新的图像或 URL。

在一个<map> 元素中使用多个 <area> 元素，可以将图像地图内的不同区域超链接到不同的目标。必需的属性 shape 和 coords 用于定义 <area> 元素。shape 属性指定区域的形状，例如多边形、矩形、圆形或正方形。coords 属性定义图像内不同区域的坐标。

语法

<area shape="" coords="" href="">

属性

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

属性	值	描述
alt	文本	指定区域的替代文本。
coords	坐标	根据 shape 属性指定适当的坐标，以定义图像地图中图像区域。
download	文件名	指定用户点击超链接时下载的目标。
href	URL	指定链接指向的页面的 URL 或锚点的名称。
hreflang	语言代码	指定目标 URL 的语言。
media	媒体查询	指定目标 URL 针对的媒体/设备。
nohref	true/false	将区域从图像地图中排除
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	指定当前文档与目标 URL 之间的关系。
shape	rect 矩形 circ 圆形 poly 多边形	指定图像地图的形状。
target	_blank _parent _self _top	在何处打开目标 URL。
type	mime_type	指定目标 URL 的 MIME（多用途互联网邮件扩展）类型。

HTML area 标签示例

下面的示例将说明 area 标签的用法。在哪里、何时以及如何使用它来定义区域，以及我们如何使用 CSS 来操作 area 元素。

用于映射图像的 Area 标签

在下面的示例中，我们将使用 area 标签在图像上标记多边形、矩形和圆形区域。多边形、矩形和圆形形状将可点击，并将重定向到教程。

<!DOCTYPE html>
<html>
<head>
   <title>HTML area Tag</title>
</head>
<body>
   <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>   
   <map name = "tutorials">
      <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank">
      
      <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank">
      
      <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank">
   </map>
</body>
</html>

图像上的 Area 标签用于放大

在这个示例中，我们用矩形映射了一个图像，当您将鼠标悬停在不可见的矩形上时，图像将放大；如果您的光标移出该矩形，图像将恢复到其正常形式。

<!DOCTYPE html>
<html>
<head>
    <style>
        #myImage {
            width: 500px;
            height: 300px;
            transition: transform 0.25s ease;
        }
        #myImage.zoomed {
            transform: scale(2);
        }
    </style>
    <script>
        function zoomIn() {
            document.getElementById('myImage').classList.add('zoomed');
        }
        function zoomOut() {
            document.getElementById('myImage').classList.remove('zoomed');
        }
    </script>
</head>
<body>
    <img id="myImage" src="/html/images/html-mini-logo.jpg" usemap="#image-map">
    <map name="image-map">
        <area target="" alt="Zoom Area" title="Zoom Area"
              href="#" coords="34,44,270,350" shape="rect" 
              onmouseover="zoomIn()" onmouseout="zoomOut()">
    </map>
</body>
</html>

支持的浏览器

标签
area	是	是	是	是	是

html_tags_reference.htm

打印页面