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:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Image Maps
Uploaded by:	Admin