Language References

HTML Syntax

<map
   class = classname
   id = value
   name = name
   style = css properties
   title = text
   event = script
>

An image map is a graphic image with predefined areas that provide links to other documents or content. When a user clicks an area in the image map, the browser loads the URL associated with that area.

There are two different kinds of image maps: server-side and client-side image maps. For server-side image maps, the mapping information is written in a separate file that resides on the web server. For client-side image maps, the mapping information is contained in a MAP element.

To define a client-side image map, the MAP object is referenced with the usemap attribute in an IMG element:

<img src="solarsys.gif" usemap="#SolarMap">

As in the above example, the value of usemap must be a hash ( # ) sign, followed by the name of the MAP element that contains the mapping information, which in this case is "#SolarMap".

The MAP element contains a set of AREA elements, each of which define a region in the image and specifies the URL to which it links.

If the user clicks a point located in multiple overlapping areas, the area that is defined first in the MAP responds to the click.

MAP Members

The following example provides the full code for an image map of the solar system. Clicking on the sun or any planet opens a link to an individual image.

Sample Code

<img src="imgs/solarsys.gif" width=504 height=126 
  border=0 alt="Solar System" usemap="#solar">

<map name="solar">
<area shape="rect" coords="0,0,76,122"
   href="imgs/sun.gif" alt="Sun">
<area shape="circle" coords="90,61,15"
   href="imgs/mercury.gif" alt="Mercury">
<area shape="circle" coords="124,61,18"
   href="imgs/venus.gif" alt="Venus">
<area shape="circle" coords="163,61,23"
   href="imgs/earth.gif" alt="Earth">
<area shape="circle" coords="201,61,14"
   href="imgs/mars.gif" alt="Mars">
<area shape="circle" coords="256,61,40"
   href="imgs/jupiter.gif" alt="Jupiter">
<area shape="circle" coords="328,61,35"
   href="imgs/saturn.gif" alt="Saturn">
<area shape="circle" coords="392,61,30"
   href="imgs/uranus.gif" alt="Uranus">
<area shape="circle" coords="443,61,24"
   href="imgs/neptune.gif" alt="Neptune">
<area shape="circle" coords="480,61,13"
   href="imgs/pluto.gif" alt="Pluto">
</map>

AREA   IMG