HTML - usemap 屬性

HTML usemap 屬性在<img> 和<map> 之間建立關係，方法是指定具有可點選區域的影像或物件。

usemap 屬性與 <map> 元素的 name 或 id 屬性關聯，並在<img> 和<map> 之間建立關係。

語法

<tag usemap-"#mapname">

"mapname" 用於儲存包含雜湊 (#) 字元的地圖名稱。

應用於

以下列出的元素允許使用 HTML usemap 屬性。

元素	描述
<img>	HTML <img> 標籤用於將影像嵌入到 HTML 文件中。
<object>	HTML <object> 標籤用於在網頁上顯示多媒體，包括音訊、影片、圖片、網站、PDF 和 Flash。

HTML usemap 屬性示例

下面的示例將說明 HTML usemap 屬性，以及我們應該在哪裡以及如何使用此屬性！

在 "img" 元素上使用 usemap 屬性

執行以下程式碼後，輸出視窗將在網頁上顯示影像。當用戶單擊影像的相應區域時，它會進一步顯示另一張影像。

<!DOCTYPE html>
<html>

<body>
    <h3>HTML usemap Attribute</h3>
    <p>
        Click on the computer, the phone, or the 
        cup of coffee to go to a new page and 
        read more about the topic
    </p>
    <img src=
"https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_640.jpg" 
         alt="Workplace" usemap="#workmap" width="400" height="270">
    <map name="workmap">
      <area shape="rect" coords="100,50,200,250" alt="Computer"
            href=
"https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
      <area shape="rect" coords="60,250,150,120" alt="Phone"
            href=
"https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bW9iaWxlJTIwcGhvbmV8ZW58MHx8MHx8fDA%3D&w=1000&q=80">
      <area shape="circle" coords="40,50,120" alt="Cup of coffee" 
            href=
"https://img.freepik.com/premium-photo/coffee-cup-old-wooden-table-with-cream_158502-63.jpg">
   </map>
</body>

</html>

在 "object" 元素上使用 usemap 屬性

當我們執行以下程式碼時，它將生成一個輸出，其中包含網頁上顯示的影像以及文字。

<!DOCTYPE html>
<html>

<body>
    <h1>The object usemap attribute</h1>
    <object data=
"https://img.freepik.com/free-vector/big-animals-set_1284-10911.jpg?w=2000" 
            width="250" height="200" usemap="#animalmap">
    </object>
    <map name="animalmap">
      <area shape="rect" coords="30,10,100,100" alt="elephant" 
            href=
"https://media.istockphoto.com/id/479667835/photo/background-elephant.jpg?s=612x612&w=0&k=20&c=DwfinIerTq104FXWcBBwegTWcmw8tf18EGqa5IpEyFk=">
   </map>
    <p>
        <b>Note:</b> The usemap attribute of the object element
        is not supported in Chrome, Edge, Safari, and Opera.
    </p>
</body>

</html>

支援的瀏覽器

屬性
usemap	是	是	是	是	是

html_attributes_reference.htm

列印頁面