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.tw/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.tw/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.tw/cg/images/logo.png"
           alt="logo" usemap="#tutorial">
      <map name="tutorial">
         <area shape="rect"
         coords="0, 0, 52, 52"
         alt="tutorial"
         href="https://tutorialspoint.tw/html/images/html.jpg">
      </map>
   </center>
</body>
</html>

支援的瀏覽器

標籤
map	是	是	是	是	是

html_tags_reference.htm

列印頁面