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 lesson focuses on:

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

What is an imagemap?

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 create the actual image map. This tag contains an 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 for backwards-compatibility by giving it the same value as you would the id attribute.

Example:

<map id="animalmap" name="animalmap">

</map>

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. The <area> tag has no end 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 the shape used is:
- rect
  coords="upper_x, upper_y, lower_x, lower_y"
- circle
  coords="center_x, center_y, radius"
- poly
  coords="x1, y1, x2, y2, ....., x(n), y(n)"
href
denotes the URL that a set of coordinates 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.

Example:

<area shape="rect" coords="0, 0, 100, 60" 
href="http://allaboutfrogs.org/" 
target="_blank" alt="Learn about frogs" />

<area shape="circle" coords="145, 25, 50" 
href="http://fins.actwin.com/" 
target="_blank" alt="Learn about fish" />

<area shape="poly" coords="210, 30, 230, 5, 260, 30, 240, 60" 
href="http://cats.about.com/" target="_blank" alt="Learn about 
cats" />

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 image map definition to be used.

Example:

<img src="animals.jpg" usemap="#animalmap" />

An entire imagemap

The entire code for an imagemap definition:

<map name="animalmap">
<area shape="rect" coords="0, 0, 100, 60" 
href="http://allaboutfrogs.org/" target="_blank" 
alt="Learn about frogs" />

<area shape="circle" coords="145, 25, 50" 
href="http://fins.actwin.com/" target="_blank" 
alt="Learn about fish" />

<area shape="poly" coords="210, 30, 230, 5, 
260, 30, 240, 60" href="http://cats.about.com/" 
target="_blank" alt="Learn about cats">
</map />

The code for the image that uses the image map:

<img src="animals.jpg" usemap="#animalmap" width="280" 
height="71" border="0" />

The completed image map:

Click on any of the animals to read some information about that animal. (Pages open in a new window)

Examples

Associate an image with an imagemap
This example demonstrates associating an image with an imagemap.

See more imagemap examples