Image Map Definition

An image map is an HTML method that enables you to create multiple links for an image. Rather than separating an image into multiple files, you create coordinates to make selected areas of the image separate links.

How does an image map work?

The use of image maps involves the use of HTML tags based on a coordinate system. A region on the image, or a series of connected rectangles, circles, or other shapes, can be identified, down to their position on the image, and marked as a hotspot that can link to a destination.

For instance, the image of the world map can have clickable regions that lead to country pages. The components of the product can have links that lead to specifications. The floor plan of the office can have rooms that, when clicked, lead to the departments.

Modern considerations about image maps

The concept of image maps has slightly changed with the evolution of responsive design. Pixel coordinates may appear to break because of the size of the screen, and thus coordinates may be calculated by JavaScript libraries in combination with image maps.

Accessibility goes hand in hand; every clickable area must include alt text that describes what that region does so that a screen reader can explain it. If proper alt attributes are not given, image maps become unusable to people using assistive technology.

Although in some cases alternative solutions exist using CSS and SVG, image maps remain very practical when it comes to photographs and complex illustrations where one would be required to provide for accurate, irregularly shaped clickable zones within a single original image file.