How to create an image map in JavaScript?

JavaScript can be used to create a client-side image map. An image map is an image on the webpage that has multiple links to other pages. These links are called hotspots. An image map is used to navigate different links to other pages or on the same web page.

In an image map, an image can be divided into different sections. We can include links to each section, and after clicking a section, it will open the corresponding link. The sections can be divided into different shapes, such as circle, rectangle, or polygon. For creating a rectangular image map, we require two different coordinates that are top right and bottom left. Similarly, for creating a pentagon image map, we require five coordinates.

Images map provides a way to link various sections of the image without require creating image files. The usemap attribute is used in the <img> tag to define the map description into that image. This attribute calls the map description applied to the specific image. Every image map has a unique map so, we have to use the name attribute in the MAP element.

There is another tag called <area> tag, which defines the coordinates and shapes of each section. We can use the events such as onclick, ondblclick, onmouseover, onmouseout, onblur, etc. with the <area> tag.

The piece of code for defining the image map is given as follows.

Syntax

Now, let's see some illustrations of using the image map to understand it more clearly.

Example

In this example, there is an image that we are using for creating an image map. We are dividing the image into two sections in the rectangular and circular shape.

The first section is the top area of the image, and the second section is the middle area of the image.

Output

After the execution of the above code, the output will be -

On clicking the top area, the output will be -

On clicking the middle area, the output will be -

Example2

Here, we are passing the images in the href attribute of the <area> tag. It means that when we click on the sections, the corresponding image will be displayed.

The image is divided into two sections. The first section is the top area of the image, and the second section is the middle area of the image. On clicking the corresponding sections, first the name is displayed of the linked image in the given textfield, and then the image will show.

Output

After the execution of the above code, the output will be -

On clicking the top area, the output will be -

On clicking the middle area, the output will be -