Learn with us

HTML image maps allow you to create clickable areas on an image, where each area corresponds to a different link or action. Image maps are defined using the <map> and <area> tags in HTML. Here’s how you can create image maps:

1. Create an Image:
   First, add an <img> tag to insert the image you want to use for the image map. Set the src attribute to the path or URL of the image.

Example:

<img src="path/to/image.jpg" alt="Description of the image" usemap="#my-map">

2. Define the Map:
   Next, define the map element using the <map> tag and give it a name attribute. The name value is used to link the map to the image.

Example:

<map name="my-map">
  <!-- Define clickable areas using <area> tags -->
</map>

3. Define Clickable Areas:
   Within the <map> tag, define clickable areas using the <area> tag. Each <area> tag represents a specific clickable region on the image.

Example:

<map name="my-map">
  <area shape="rect" coords="x1,y1,x2,y2" href="destination1.html" alt="Description of Area 1">
  <area shape="circle" coords="x,y,radius" href="destination2.html" alt="Description of Area 2">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="destination3.html" alt="Description of Area 3">
</map>

The <area> tag has different shape attributes to define the shape of the clickable area: rect (rectangle), circle (circle), and poly (polygon). The coords attribute specifies the coordinates of the shape. The href attribute specifies the destination URL or action associated with the area, and the alt attribute provides alternative text for accessibility.

4. Linking the Image and Map:
   To link the image and map, add the usemap attribute to the <img> tag and set it to the name of the map preceded by a # symbol.

Example:

<img src="path/to/image.jpg" alt="Description of the image" usemap="#my-map">
<map name="my-map">
  <!-- Define clickable areas using <area> tags -->
</map>

Now, the image areas defined by the <area> tags will be clickable and will navigate to the specified destinations when clicked.

Note: The coords attribute values represent the coordinates of the clickable areas on the image. The actual values depend on the shape of the area and the dimensions of the image.

Image maps provide a way to create interactive and complex clickable regions on images. They are useful for creating navigation menus, diagrams, and other interactive elements.