HTML - ismap Attribute

HTML ismap attribute 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

<img ismap>

Applies On

Below listed elements allow using of the HTML ismap attribute

Element	Description
<img>	HTML <img> tag is used to render image in webpage.

Example of HTML ismap Attribute

Below examples will illustrate the HTML ismap attribute, where and how we should use this attribute!

Server Side Image Map

In the following example, we are using the HTML 'ismap' attribute within the <img> element. When we click on image in output screen, the coordinate of clicked area is passed to server for processing. In this example the process data can not be shared due to limitation of backend support. Php Tutorial will teach you how servers are processing input

<!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>

Check ismap present in Document

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>
      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>

Supported Browsers

Attribute
ismap	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm