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

列印頁面