HTML – images map

HTML image maps allow you to produce clickable dimensions on an image.

Using the HTML <map> tag with <area> tag, a client-side image map can be created.

Usually, an image map consists of an image with areas that can be clicked. When you click on an image, it opens to a new or provided destination.

There can be more than one <area> element within the <map> tag, according to the area’s coordinates and type.

This allows you to link any part of the image to other documents without dividing it.

Image Map Syntax

<img src=”” alt=”’ usemap=”#name_value”>
<map name=”name_value”>
<area shape=”” coords=”” href=”” alt=”’>
<area shape=”” coords=”” href=”” alt=”’>

Image Maps

Using the HTML <map> tag, we can define an image map. The image map is a picture that contains clickable areas. An area is defined by one or more <area> tags.

Below is an image of a computer and a cup of coffee: Click on the computer or the cup of coffee and see what happens:



The HTML source code for the above HTML images map is as follows:


<!DOCTYPE html> <html> <body><img src="" alt="Workplace" usemap="#workmap"> <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="Coffee" href="coffee.htm"> </map></body> </html>

How Html Images Map Works?

Image maps are intended to permit you to conduct various actions based on where you click inside the image.

Images and HTML codes representing clickable areas are required to construct an image map OR HTML image maps.

The Image

An image is inserted utilizing the <img> tag.

You must add a usemap attribute to the image in order to make it different from other images:

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

To make an association between an image and a map, the usemap value begins with a hashtag # followed by the name of the map.

Any image can be used as an Html images map!

How To Create a Image Map?

Place an <map> element into an HTML images map.

The <map> element is used to make image maps, and the name attribute connects it to the associated image:

<map name=”workmap”>

It is mandatory that the name attribute be the same value as the usemap attribute of an <img> tag.

The Areas

After that, add the clickable areas.

Clickable areas are specified using the <area> element.


Here are some options for defining the clickable area:

  • Rectangles are determined by rect.
  • The circle represents a circular area.
  • A polygonal region is described by poly.
  • Default – characterizes the entire region.

For the clickable area to be positioned on the image, you must specify some coordinates.


Shape=”rect” has two coordinates, one for the x-axis and one for the y-axis.

In this case, 34,44 lies 82 pixels from the left margin and 76 pixels from the top:


Coordinates (270,350) are 385 pixels in from the left edge and 310 pixels up from the top:


With this data, we can construct a rectangular clickable area when it comes to HTML image maps:


<!DOCTYPE html> <html> <body><area shape="rect" coords="34, 44, 270, 350" href="computer.htm"></body> </html>

The following area marked in green becomes a clickable and will take the user to “computer.htm”:



To add a circle dimensions, first get the circle’s center coordinates: (337,300)


Next, set the circle’s radius: 44 pixels.


The data is now sufficient for constructing a clickable circular area:


<!DOCTYPE html> <html> <body><area shape="circle" coords="337, 300, 44" href="coffee.htm"></body> </html>

In this area, the user will click and be taken to the web page “coffee.htm”:



A polygon is created by the intersection of several coordinate points (the shape=”poly”).

You can utilize this to make any shape you want. It might look like a croissant!

What is the proper way to make croissants?

In the picture below, we will make croissants and a clickable area w.hen it comes to HTML image maps

French Food

A croissant’s x and y coordinates must be found for all edges:

French Food

There are two axes, one for the x-axis and one for the y-axis, which is as follows:


<!DOCTYPE html> <html> <body><area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm"></body> </html>

Area with the green color becomes clickable and takes the user to “croissant.htm”:

French Food

Here is another example of the image map:


<!DOCTYPE html> <html> <head> </head> <body> <map name="primary"> <area shape="circle" coords="75,75,75" href="" target="_blank" alt="JavaScript"> <area shape="circle" coords="275,75,75" href="" target="_blank" alt="CSS"> </map> <img usemap="#primary" src="" alt="350 x 150 picture of Person"> </body> </html>

Image Map Background Stylilng

Images used with Map can also be styled with the CSS properties.See example below:


<!DOCTYPE html> <html> <head> <style> img { border:solid; width:100% ; height:100%; } map { position:absolute; } </style> </head> <body> <map name="primary"> <area shape="circle" coords="75,75,75" href="" target="_blank" alt="JavaScript"> </map> <img usemap="#primary" src="" alt="350 x 150 picture of Person"> </body> </html>

Image Map and JavaScript

When we talk about HTML image maps, a JavaScript click event to the <area> element to execute a JavaScript function:

Whenever the area is clicked, we execute a JavaScript function using the onclick attribute.


<!DOCTYPE html> <html> <body><map name="workmap"> <area shape="circle" coords="337,300,44" onclick="myFunction()"> </map> <script> function myFunction() { alert("You clicked the coffee cup!"); } </script></body> </html>

Chapter Summary

  • Construct an image map using the HTML map> element.
  • Utilize the HTML <area> element to determine the clickable areas in the image map.
  • An image map can be pointed to using the HTML usemap attribute.

HTML Image Tags

<img>Creates an image.
<map>Makes an image map by defining it.
<area>Creates a clickable area within an image map.
<picture>Multiple images can be contained within this container.

You can find a comprehensive index of all HTML tags on our HTML Tag Reference page.

We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *