How to Create Image Maps in HTML?

Image maps in HTML5 allow you to make certain areas of an image clickable, leading users to different links or triggering specific actions. The clickable areas (also known as hotspots) are defined using the <area> tag, while the <map> tag is used to specify the map itself.

What Is an Image Map?

An image map is an image with clickable areas, defined by coordinates. When a user clicks on a defined section of the image, they are redirected to a URL, or an action is performed. This is useful for things like:

• Navigational menus
• Interactive infographics
• Clickable charts or diagrams

Syntax:

<map name="map-name">
 <area shape="shape" coords="x1, y1, x2, y2" href="URL">
</map>

Attribute value:

• name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have the same value as the image'susemap attribute.

Example: Creating a Simple Image Map in HTML5

Here’s an example of creating a clickable image map where a specific area redirects to a website.

Output:

👁 How_to_Create_Image_Maps_in_HTML5