<map>

The <map> tag allows you to define an interactive image map that associates clickable areas with hyperlinks or specific actions. In conjunction with the <area> tag, it transforms an image into a dynamic interface, allowing users to click on different regions to navigate or interact.

It is commonly used for geographical maps, diagrams, or complex images with multiple points of interest.

Structure and syntax of the <map> tag

The <map> tag encapsulates multiple <area> tags that describe the interactive areas of the image.

Syntax

Here is the classic syntax of a <map> tag:

<map name="[MAP-NAME]">
  <area shape="[SHAPE]" coords="[COORDINATES]" href="[URL]" alt="[DESCRIPTION]" />
</map>

Usage example

Let's take a simple example: an image that presents five of our courses. We need to have five clickable areas to redirect each area to the correct course.

Using a <map> tag with multiple <area> tags is a great idea!

Attributes

The <map> tag has only one specific attribute (apart from classic attributes like title, which allows displaying a tooltip with a small text, for example).

This is the name attribute, which gives it a unique name.

This name is used to link the <map> tag to the <img /> tag. Thus, our areas will be superimposed on the image that has the same name as in the name attribute.

Browser compatibility

The <map> tag is compatible with all modern and older browsers.