Full Example of HTML Image Map and JavaScript
Add a click event to the <area> element to execute a JavaScript function: Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the cup of coffee to execute a JavaScript function:</p>
<img src="https://itupto.com/uploads/demo/2023-09-09-07-19-13-workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
</body>
</html>
Output should be:
| Full Example of HTML Image Map and JavaScript | HTML Image Maps |
| What is HTML Image Maps | HTML Image Maps |
| How Does it HTML Image Maps? | HTML Image Maps |
| How to create HTML Image Map | HTML Image Maps |
| How to create HTML Image Imap Shape="circle" | HTML Image Maps |
| How to create HTML Image Map Shape="poly" | HTML Image Maps |
| How to create HTML Image Map and JavaScript | HTML Image Maps |
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Image Maps |
Uploaded by: | Admin |