Skip to main content

Image Maps

Image maps in HTML are a fascinating and useful feature that allows you to create clickable areas on an image. You can define shapes in different areas of an image and link them to distinct URLs. This is usually used in navigation menus or interactive maps.

Understanding Image Maps​

The <map> tag is used to create an image map. It contains a name attribute, which is then associated with the usemap attribute of the img tag. The map itself is defined by using the <area> tag inside <map> tag.

Here's the basic structure:

<img src="image.jpg" usemap="#mapname">

<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="link.html">
</map>

In this example, image.jpg is the image we're creating a map on. The usemap attribute in the img tag is linked to the name attribute in the map tag. Inside the map tag, we have an area tag that defines the shape and coordinates of the clickable area, and the URL it links to.

Defining Shapes and Coordinates​

There are three shapes you can define in an image map:

  1. Rectangle (rect): This is defined by the x and y coordinates of the top-left corner and the x and y coordinates of the bottom-right corner of the rectangle.

  2. Circle (circle): A circle is defined by the x and y coordinates of the center of the circle and the radius.

  3. Polygon (poly): A polygon can have any number of vertices. The coordinates of each vertex need to be defined.

Here's how you define each shape:

<area shape="rect" coords="x1,y1,x2,y2" href="link.html">
<area shape="circle" coords="x,y,radius" href="link.html">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="link.html">

Adding Alternate Text​

The alt attribute can be used inside the area tag to provide alternate text when the image cannot be displayed. This is also useful for accessibility purposes.

<area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="Alternate Text">

Making the Image Map Responsive​

To make your image map responsive, you need to use JavaScript or JQuery to recalculate the coordinates based on the current size of the image.

Here's a basic example using JQuery:

$(window).resize(function () {
    $('map').imageMapResize();
});

In this tutorial, we learnt about image maps in HTML, how to define different shapes and their coordinates, and how to make the image map responsive. With image maps, you can create interactive and engaging web pages. Don't be afraid to experiment and create complex image maps to enhance your website's user experience.