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>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | Yes | Yes | Yes | Yes | Yes |
