Image Maps

The HTML <map> tag defines an image-map. An image-map is an image with clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map, you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Create the Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute.

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, 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

Coordinates

You must define the coordinates to be able to place the clickable area onto the image.

Rect

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. The coordinates 34,44,270,350 locate the top-left corner (34,44) and the bottom-right corner (270,350).

Circle

The coordinates for shape="circle" come in pairs, one for the x-axis and one for the y-axis. The coordinates 337,300,44 locate the center of the circle (337,300) and the radius (44).

Poly

The coordinates for shape="poly" come in pairs, one for the x-axis and one for the y-axis. The coordinates 140,121,181,116,204,160,204,222,137,229,132,138 locate the points of the polygon.

HTML Image Map