The HTML ismap attribute is a boolean attribute on the <img> tag that specifies whether the image is a server-side image map.
Definition and Usage
➔ When a user clicks on an image, the coordinates of the click are sent (e.g., myserverpage.php?100,150) to the server to handle the action instead of being handled by the browser.
➔ The ismap attribute is only valid when the <img> tag is placed inside an <a> tag with a valid href attribute (e.g., myserverpage.php).
Syntax
//In HTML
<a href="#">
<img src="./resources/images/box.png" alt="Sample image" width="350" height="150" ismap onclick="myFunction()">
</a>
//In JavaScript
<script>
let element = document.querySelector("img");
label.ismap = true;
label.setAttribute('ismap', true);
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ismap attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.1);
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML ismap attribute example</h3>
<p>The ismap attribute is used to specifies whether the image is a server-side image map.</p>
<a href="#">
<img src="./resources/images/box.png" alt="Sample image" width="350" height="150" ismap
onclick="showhref()">
</a>
<p><b>Note:</b> Click on the image to see the coordinates of the image.</p>
</div>
</body>
<script>
function showhref() {
const url = new URL(window.location.href);
const data = {};
const params = new URLSearchParams(data);
url.search = params.toString();
history.replaceState(null, '', url);
alert(url.href);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.
Example Form Parameters
<!DOCTYPE html>
<html>
<head>
<title>HTML ismap attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input[type='text'] {
padding: 5px;
}
input[type='text']:hover,
textarea:hover {
background-color: #f6f6f6;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML ismap attribute example</h3>
<p>The ismap attribute is used to specifies whether the image is a server-side image map.</p>
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" value="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='40' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="showhref()"></td>
</tr>
</table>
</form>
<p id="result"><b>Note:</b> Click on the submit button to see the URLSearchParams of the form.</p>
</div>
</body>
<script>
let id = document.getElementById("id");
let name = document.getElementById("name");
let comment = document.getElementById("comment");
function showhref() {
event.preventDefault();
const url = new URL(window.location.href);
//const data = {};
const data = { id: id.value, name: name.value, comment: comment.value };
const params = new URLSearchParams(data);
url.search = params.toString();
history.replaceState(null, '', url);
const urlParams = new URLSearchParams(window.location.search);
let sid = urlParams.get('id');
let sname = urlParams.get('name');
let scomment = urlParams.get('comment');
document.getElementById("result").innerHTML = "Location.href are: " + url.href + "<br><br> Parameres are:" + " <br>ID: " + sid + ", <br>Name: " + sname + ", <br>Comment: " + scomment;
alert(url.href);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.