HTML imagemaps

Images are used as graphical content on webpages, and an image can also link to a document or another resource. But what if you can use one image to link to many different docments and/or resources?

This tutorial focuses on:

What is an imagemap?
The <map> tag
The <area> tag
Associate an image with an imagemap
An entire imagemap

What is an imagemap?

You can set an image to be a link, but what if you can set an image to be multiple links?

An imagemap is an HTML concept which enables you to turn one image into many different links. Each area of the image, specified by a set of coordinates, will be a different link.

The <map> tag

The <map> tag is used to declare the actual image map. This tag contains an name or id attribute which specifies a unique name for the image map.

NOTE: You can also use the name attribute at the same time as the id attribute and give them both the same value. Some browsers read the name attribute, while others read the id attribute, so it is better to use both for browser compatibility.

Example:

The <area> tag

The <map> tag by itself only declares an image map, it does not define sets of coordinates for different links. This task is achieved through the use of the <area> tag.

NOTE: The <area> tag has no end tag

NOTE: The <area> tag goes inside the <map> tag

Attributes of the <area> tag:

shape - denotes the shape for a set of coordinates. Possible values include rect, circle, and poly.
coords - denotes a set of coordinates for a link. The points specified vary according to shape. If shape is rect use "upper_x, upper_y, lower_x, lower_y", circle use "center_x, center_y, radius", poly use "x1, y1, x2, y2, ....., x(n), y(n)"
href - denotes the URL that a set of coordinates will link to
target - denotes where a link will open. Possible value include _blank (link will open in a new window), _self (link will open in the same frame, if there is a frameset), _parent (link will open in the parent frame, if there is a frameset), _top (link will open in the full window, if there is a frameset)
alt - Specifies alternative text for an area of an image map in case the image does not load

Example:

Associating an image with an image map

To associate an image with an image map, include the usemap attribute in the <img> tag of the image you want to become an image map. It should be set with a pound sign ( # ) followed by the name of the imagemap definition to be used (should be same value as that set for the name attribute in the <map> tag). This will create a relationship between an image and the map.

Example:

An entire imagemap

The entire code for an imagemap definition:

The code for the image that uses the image map:

The completed image map:

Each animal in the image is now a separate link to a different page. Click on any of the animals to read some information about it.

The imagemap is a relatively complex thing. Unlike pieces of text, links, or images, it is an entire structure. Study the example and concepts presented in this tutorial and familiarize yourself with imagemaps.

Remember this outline when you are creating an imagemap:

Put the image on the page
Declare an imagemap with the <map> tag and give it a unique ID ( the id attribute) AND name (the name attribute) for browser compatibility.
Decide how many links the imagemap will contain as well as the shapes and coordinates for the different links
Once you have that figured out, plot this data using the <area> tag
Associate the image with the imagemap using the usemap attribute in the <img> tag