HTML - ismap Attribute

The HTML ismap attribute is a Boolean attribute that is used to specify that the image is part of a server-side image map.

If you use the <img> element within the <a> element and used the ismap attribute without the img element, when the user clicks on the server-side image map, the click coordinates will be sent to the server as a URL query string.

You can use the ismap attribute with JavaScript to verify whether this attribute is present in an element or not. It returns true/false when used with JavaScript based on the presence of the attribute.

Syntax

Following is the syntax for HTML ismap attribute − 

<img ismap>

Example

In the following example, we are using the HTML ‘ismap’ attribute within the <img> element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'ismap' attribute</title>
   <style>
      img {
         border: 5px solid rebeccapurple;
         padding: 10px;
      }

      p {
         color: rgb(136, 142, 10);
      }
   </style>
</head>
<body>
   <!--HTML 'ismap' attribute-->
   <h3>Example of the HTML 'ismap' attribute</h3>
   <a href="">
      <img src="https://www.tutorialspoint.com/static/images/logo.png?v3" alt="tutorialspointlogo" width="300" height="80" ismap>
   </a>
   <p>Click on the above image, the click cordinate will sent to server as URL query.</p>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with a image on the webpage.

Example

Considering the another scenario, where we are going to run the scrip with the ismap attribute along with the image element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'ismap' attribute</title>
   <style>
      img {
         border: 5px solid rgb(56, 4, 107);
         padding: 10px;
         border-radius: 10px;
         font-size: 20px;
      }

      p {
         color: rgb(7, 14, 108);
         font-size: 20px;
         font-weight: bold;
      }

      span {
         color: green;
         font-family: sans-serif;
         font-weight: bolder;
         font-size: 18px;
         margin: 10px 10px;
         width: 200px;
         padding: 10px;
         background-color: azure;
      }

      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="https://www.tutorialspoint.com/static/images/logo.png?v3" alt="tutorialspoint_logo" width="300" height="150" id='demo'>
   </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>
   <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;
      }
   </script>
</body>
</html>

On executing the above script, the output window will pop up displaying the image along with a click button on the webpage. when the user clicks the button the event gets triggered and displays a text.

html_attributes_reference.htm
Advertisements