HTML - ismap 属性



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

如果在<img> 元素内使用<a> 元素并使用 ismap 属性(无需 img 元素),当用户点击服务器端图像地图时,点击坐标将作为 URL 查询字符串发送到服务器。

可以使用 JavaScript 和 ismap 属性来验证该属性是否存在于元素中。它根据属性的存在与否在使用 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="tutorialspointlogo" 
           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 属性以及图像元素运行脚本。

<!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="tutorialspoint_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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
ismap
html_attributes_reference.htm
广告