HTML - usemap 属性_HTML 菜鸟教程

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

<< HTML - type 属性 HTML - value 属性 >>