HTML - ismap 属性_HTML 菜鸟教程

HTML ismap 属性用于指定图像是服务器端图像映射的一部分。

如果在 <a> 元素中使用 <img> 元素，并使用了不带 img 元素的 ismap 属性，则当用户在服务器端图像映射上单击时，单击坐标将作为 URL 查询字符串发送到服务器。

您可以将 ismap 属性与 JavaScript 一起使用，以验证此属性是否存在于元素中。当与 JavaScript 一起使用时，它会根据属性的存在返回 true/false。

语法

<img ismap>

适用于

下面列出的元素允许使用 HTML ismap 属性

元素	描述
<img>	HTML <img> 标签用于在网页中渲染图像。

HTML ismap 属性示例

以下示例将说明 HTML ismap 属性，我们应该在何处以及如何使用此属性！

服务器端图像映射

在以下示例中，我们在 <img> 元素中使用 HTML“ismap”属性。当我们在输出屏幕中点击图像时，点击区域的坐标会传递给服务器进行处理。在此示例中，由于后端支持的限制，无法共享流程数据。Php教程将教你服务器如何处理输入

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 'ismap' attribute</title>
</head>

<body>
	 <!--HTML 'ismap' attribute-->
	 <h3>HTML 'ismap' attribute</h3>
	 <a href="">
			<img src="static/images/logo.png?v3" 
					 alt="QikepuComlogo" 
					 width="300" 
					 height="60" 
					 ismap>
	 </a>
	 <p>
			Click on the above image, the click 
			coordinate will sent to server as 
			URL query.
	 </p>
</body>

</html>

检查文档中存在的ismap

考虑到另一种情况，我们将运行带有 ismap 属性和 image 元素的 scrip。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 'ismap' attribute</title>
	 <style>
			button {
				 width: 100px;
				 padding: 10px;
				 border-radius: 5px;
				 cursor: pointer;
				 background-color: blueviolet;
				 color: white;
			}
	 </style>
</head>

<body>
	 <!--HTML 'ismap' attribute-->
	 <h3>Example of the HTML 'ismap' attribute</h3>
	 <a href="">
			<img src="/static/images/logo.png?v3" a
					 alt="QikepuCom_logo" 
					 width="300" 
					 height="150" 
					 id='demo' 
					 ismap>
	 </a>
	 <br>
	 <p>
			Click on the below button to check 
			whether the 'ismap' attribute is present.
	 </p>
	 <button onclick="func()">Check</button>
	 <br>
	 <br>
	 <span id='res'></span>
	 <p id="par"></p>
	 <script>
			function func() {
				 let x = document.getElementById('demo').isMap;
				 let res = document.getElementById('res');
				 res.innerHTML = "Is 'ismap' attribute is present 
				 within the 'img' element or not? " + x;

				 if(x){
				 let par = document.getElementById('par');
				 par.innerHTML = "Try removing ismap attribute from img tag."
				 }
				 else{
				 let par = document.getElementById('par');
				 par.innerHTML = "Try adding ismap attribute to img tag."
				 }

			}
	 </script>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - id 属性 HTML - kind 属性 >>