- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
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 |
To Continue Learning Please Login
Login with Google