How to Create an Image Map in HTML ?

An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geographic maps.

Using the <map> and <area> Tags

The most common way to create an image map in HTML is by using the <map> and <area> tags. The <map> tag is used to define the image map, and the <area> tag is used to define each clickable area within the map.

Example 1: The below code will create a image map using the map and area tag.

Output:

👁 image-map

Example 2: This example describes the use of HTML map. Here, we use image map to make image clickable with three different links in different areas.

Output:

👁 image-map-2