HTML - area 标签_HTML 菜鸟教程

HTML <area> 标签指定了图像的区域、可以单击的映射或通过超链接链接到的活动区域。它将执行一些操作，例如打开新的图像或 URL。

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

语法

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

属性

<area> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出。

属性	值	描述
alt	text	指定区域的替换文本。
coords	coordinates	指定适合于 shape 属性的坐标，以定义图像映射的图像区域。
download	filename	指定在用户单击超链接时下载目标。
href	URL	指定页面的 URL 或链接转到的锚点的名称。
hreflang	language_code	指定目标 URL 的语言。
media	media query	指定针对目标 URL 进行优化的媒体/设备。
nohref	true/false	从图像映射中排除某个区域
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	指定当前文档与目标 URL 之间的关系
shape	rect rectangle circ circle poly polygon	指定图像映射的形状
target	_blank _parent _self _top	在何处打开目标 URL。
type	mime_type	指定目标 URL 的 MIME（多用途 Internet 邮件扩展）类型。

<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 = "#QikepuCom"/>   
   <map name = "QikepuCom">
      <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Qikepu" target = "_blank">
      
      <area shape = "rect" coords = "22,83,126,125" alt = "HTML QikepuCom"
      href = "/html/index.htm" target = "_blank">
      
      <area shape = "circle" coords = "73,168,32" alt = "PHP QikepuCom"
      href = "/php/index.htm" target = "_blank">
   </map>
</body>
</html>

<area> 标签放大图像

在这个例子中，我们用 rect 映射了一个图像，当您将鼠标悬停在不可见的矩形上时，图像将放大，如果您的光标移出该矩形，图像将返回到其规范形式。

<!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>	Yes	Yes	Yes	Yes	Yes

<< HTML - map 标签 HTML - canvas 标签 >>