Questions And Answers

More Tutorials

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)

HTML Image Map example hot air balloon


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

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


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


In this page (written and validated by ) you learned about HTML Image Map . What's Next? If you are interested in completing HTML tutorial, your next topic will be learning about: HTML Background Image.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.