Chapter 18. Advanced HTML

Image maps provide a way for users to interact with graphically presented information in a natural way. If you have spent time browsing websites with graphics you have probably navigated using image maps.

Definition

Image maps provide a mechanism for specified areas of GIF images to act as a hypertext link, and so link to other HTML pages or resources.

It is straightforward to create a hypertext reference for an entire image. For example:

<a href=index.html><img src=house.gif></a>

While code as the above is sufficient for images that act as buttons, there are times when navigation can be simplified, and made more intuitive and interesting by defining different areas of images to link to different hypertext anchors. Consider the following Web page navigation techniques:

clicking on a city plan or country map to indicate where you live, and then being linked to a page showing details of the stores nearest to your area.
using an information terminal in a shopping complex to click on the store you wish to visit, and then being taken to a page giving directions from the terminal location to the desired store.
being presented with the shelves of a virtual, on-line grocery store (i.e. pictures of carrots, apples, bananas, grapes etc.), and clicking on the apples; and then being presented with pictures of different apple varieties, their quantities and available prices.
being presented with a diagram of the product life cycle stages supported by an industry management consultancy firm, and clicking on the life cycle stage you are considering contracting them for. Then being presented with case studies, service/pricing examples and contact details.

The above scenarios require the browser/server to respond differently depending on which area of an image is clicked by the user. All these scenarios, and many more, can be implemented through the use of image maps.