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

打印页面