HTML Image Map

With HTML image maps, you can create clickable areas on an image.

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 hot air balloon in the image below: (this is only optimized for desktop users)

Example

<img src="image_nature.jpg" alt="image of nature" usemap="#workmap">

<map name="workmap">
<area shape="circle" coords="290,100,40"  alt="Hot air balloon" href="https://hotairballoon.com/" >
</map>

Image map

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">

Shape

You must define the shape of the clickable area, and you can choose one of these values:

• rect - defines a rectangular region

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.



• circle - defines a circular region

To add a circle area, first locate the coordinates of the center of the circle & Then specify the radius of the circle.



• poly - defines a polygonal region

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).



• default - defines the entire region