Making a Multimedia Website

You are here : HomeCreating a Multimedia Website Create Fuctioning Hyperlinks

Fact file4.7 Image maps and hotspots


Navigation bars take many different formats, some graphic, others text only. For example, a row of separate hyperlinked buttons may appear like single continuous image. Alternatively, a navigation bar can be produced by taking one large image and slicing it up into smaller sections in image editing software such as Serif PhotoPlus.

CBBC navigation bar

The screenshot above shows a navigation bar from the CBBC website ( Each button is a separate image with a different hyperlink.

example of an image mapAn image map, on the other hand, is one large image with several clickable areas within it that act as hyperlinks. The clickable areas within an image map are called hotspots. Any image can be used as an image map and hotspots can be attached to both JPEG and GIF images. ALT tags can also be added to hotspots to help users with visual impairments.

Hotspots are not part of the image, they are added in at the page design stage using software such as Serif WebPlus.

The image map on the right is from DirectGov’s OnePlace website, which aims to help visitors find information about their local area.

It uses a graphic showing English regions. Hotspots have been placed over the numbered regions. Clicking on one takes the visitor to a second image map showing the local authorities in that area. A text menu is included next to the map to provide a  more accessible way of navigating for visitors who are using screen readers and cannot use the graphic image map with hotspots.

Many websites no longer use image maps these days. Many prefer to chop an image up into separate images or use Flash or Javascript applets to provide more interactive features.

paperclipCreating an image map in WebPlus

Previous PageMain Site IndexSection indexNext page