HTML Syntax

<map
   class = classname
   id = value
   name = name
   style = css_style_rules
   title = text
>

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.

NOTE: Both start and end tags are required.

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