HTML Image Map

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Image Map

The HTML <map> tag denotes an image map. An image map is an image enabling areas of a picture to be clickable. The areas are defined with one or more <area> tags.

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img fetchpriority="high" decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>


				
			

Output:

Image Maps

Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:

Workplace Computer Phone Cup of coffee

The Image

The image is used using the tag. The only difference from other images is that an usemap attribute is used:

<map name=”workmap”>

The usemap value is started by using the hashtag # followed by the name of the image map and is used to create a relationship between the image and the image map.

Create Image Map

element creates an image map, and is linked to the image by using the required name attribute:

The name attribute should have the same value as the ‘s usemap attribute.

The Areas

Adding the clickable areas.

A clickable area is illustrated by using an

element.

Shape

The shape of the clickable area must be defined, and you can choose one of these values:

rect – defines a rectangular region

circle – defines a circular region

poly – defines a polygonal region

default – defines the entire region

Example:

 

				
					<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer to go to a new page and read more about the topic:</p>
<img fetchpriority="high" decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>
</body>
</html>

				
			

Output:

Image Maps

Click on the computer to go to a new page and read more about the topic:

Workplace Computer

Image Map and Javascript

A clickable area can also trigger a JavaScript function.

To execute a JavaScript function, add a click event to the

element:

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the image to execute a JavaScript function:</p>
<img fetchpriority="high" decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="circle" coords="337,300,44" href="new.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
  alert("You clicked flower!");
}
</script>
</body>
</html>
				
			

Output:

After Clicking Image:

alert shows you clicked flower and click on ok button.

Open new.html page.