HTML Image Maps

Understanding HTML Image Maps

An HTML image map allows different areas of a single image to act as separate clickable links.

Image maps use the usemap attribute on an <img> element together with the <map> and <area> elements to define the clickable regions.

Image Map Syntax

An image map begins with an <img> element whose usemap attribute connects the image to a corresponding <map> element.

<img src="/img/images/image-map.png"
     alt="HTML image map example"
     width="600"
     height="400"
     usemap="#example-map">

<map name="example-map">
  <area shape="rect"
        coords="20,20,200,150"
        href="https://www.example-web.site/"
        alt="Example link">
</map>

The value of usemap begins with # and must match the name value of the associated <map> element.

The usemap Attribute

The usemap attribute identifies the image map associated with an image.

<img src="/img/images/image-map.png"
     alt="HTML image map example"
     usemap="#example-map">

The leading # refers to the named map in the same document.

The <map> Element

The <map> element groups the clickable regions associated with an image. Its name attribute provides the identifier referenced by the image's usemap attribute.

<map name="example-map">
  ...
</map>

A single <map> element can contain multiple <area> elements, allowing one image to link to several different destinations.

The <area> Element

The <area> element defines one clickable region within an image map. Common attributes include shape, coords, href, and alt.

<area shape="rect"
      coords="20,20,200,150"
      href="https://www.example-web.site/"
      alt="Example link">

The <area> element is an empty element and does not use a closing tag.

Image Map Shapes

The shape attribute determines the type of clickable region created by an <area> element. Common values are rect, circle, and poly.

<area shape="rect" coords="20,20,200,150" href="#" alt="Rectangle area">

<area shape="circle" coords="300,180,60" href="#" alt="Circle area">

<area shape="poly" coords="420,50,560,120,500,260,400,200" href="#" alt="Polygon area">

The coordinate values required by coords depend on the selected shape.

Image Map Coordinates

Image map coordinates are measured in pixels from the image's upper-left corner. The horizontal position increases from left to right, while the vertical position increases from top to bottom.

For rect, the coordinates identify the upper-left and lower-right corners. For circle, they identify the center position and radius. For poly, pairs of coordinates define each point of the polygon.

rect:   x1,y1,x2,y2

circle: center-x,center-y,radius

poly:   x1,y1,x2,y2,x3,y3,...

HTML Image Map Example

The following example contains multiple clickable regions within one image. Click each shape in the image to open its corresponding image. Click the reset icon in the editor toolbar to return to the image map.

Responsive Image Maps

Traditional image-map coordinates are based on the image's intrinsic pixel dimensions. If CSS scales the image to a different displayed size, the clickable coordinates do not automatically scale with it.

This can cause clickable regions to become misaligned on responsive layouts. Image maps therefore require extra care when the image size changes, and another technique may be more appropriate when flexible responsive positioning is important.

Image Map Best Practices

• Provide useful alt text for each linked <area>.
• Make clickable regions large enough to select easily.
• Avoid overlapping regions unless the behavior is intentional.
• Test every region to verify that its coordinates match the intended part of the image.
• Be cautious when resizing image-map images because fixed pixel coordinates do not automatically adjust with the displayed image size.
• Use ordinary links or other interface controls when they provide a clearer or more accessible solution.

Summary

HTML image maps make it possible to create multiple clickable regions within a single image. The usemap attribute connects an image to a <map> element, while individual <area> elements define the shape, coordinates, destination, and alternative text for each clickable region.