Image maps allow you to create clickable areas on an image, which you can link to any webpage.
The <map> tag in HTML is used to create an image map, which is an image with clickable regions. These regions are defined using one or more <area> tags.
In the below image, the notebook, yellow circular object and a bunch of pencils and pens in the left side of the image are clickable areas, defined via an image map code, which is shown below image. You can check it by hovering your mouse cursor above those areas.
<img src="image.jpg" alt="Imagemap" usemap="#imagemap" width="380" height="213">
<map name="imagemap">
<area shape="rect" coords="83,37,310,197" alt="Rectangle" href="url">
<area shape="circle" coords="344,33,17" alt="Circle" href="url">
<area shape="poly" coords="27,83,34,84,44,73,44,98,52,82,68,82,74,117,37,194,20,208,18,180,4,175" alt="Polygon" href="/">
</map>The image is inserted using the <img> tag and the image map is attached to the image by using a usemap attribute as you can see in the below code.
<img src="image.jpg" alt="Imagemap" usemap="#imagemap">The usemap attribute value begins with a hash tag #, followed by the name of the image map.
The <map> element is used to define an image map.
The name attribute must match the value of the <img> tag's usemap attribute.
Each clickable area is specified using an <area> element.
Shape
Specifying a shape of the clickable area is must and you can do it by choosing one of the following values:
rect: For rectangular region.circle: For a circular region.poly: For a polygonal region.default: For the entire region.
Additionally, you providing the coordinates to position the clickable area on the image is also mandatory.
"rect" Shape
For shape="rect", the coordinates are provided in pairs, representing the x-axis and y-axis.
For example, the coordinates 83,37 indicate a position 34 pixels from the left margin and 44 pixels from the top.
The coordinates 310,197 represent a location that is 270 pixels from the left margin and 350 pixels from the top.
This will create a clickable rectangular area.
<area shape="rect" coords="83,37,310,197" href="url"> 
"circle" Shape
To add a circle area, you need to first locate the coordinates of the center of the circle. For example, in case of the below image, we have 337,300.
Next, you need to specify the radius of the circle, which is 17 pixels. This will create a clickable circular area.
<area shape="circle" coords="337,300,17" href="url"> 
"poly" Shape
The shape="poly" attribute contains multiple coordinate points, defining a shape created with straight lines (a polygon).
This can be utilized to create various shapes. In this case, you need to determine the x and y coordinates for all edges of the shape.
The coordinates are provided in pairs, with one value for the x-axis and one for the y-axis in anti-clockwise direction.
In this example, we can define these coordinates as:
<area shape="poly" coords="27,83,34,84,44,73,44,98,52,82,68,82,74,117,37,194,20,208,18,180,4,175" href="url">
You can also attach JavaScript functions to the clickable areas. For example, if you want to display an alert or an information pop-up on the same page, when it is clicked, instead of opening a regular webpage.
Please check below options for the links to our previous or next tutorial.