This example provides the code for an image map of the solar system. It creates links from the image map to individual images of the planets using the area element with the map element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.
<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
ALT="Solar System" USEMAP="#SystemMap">
<MAP NAME="SystemMap">
<AREA SHAPE="rect" COORDS="0,0,82,126"
HREF="/workshop/graphics/sun.gif">
<AREA SHAPE="circle" COORDS="90,58,3"
HREF="/workshop/graphics/merglobe.gif">
<AREA SHAPE="circle" COORDS="124,58,8"
HREF="/workshop/graphics/venglobe.gif">
<AREA SHAPE="circle" COORDS="162,58,10"
HREF="/workshop/graphics/earglobe.gif">
<AREA SHAPE="circle" COORDS="203,58,8"
HREF="/workshop/graphics/marglobe.gif">
<AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,
281,75,288,91,267,87,253,89,237,81,229,64,228,54"
HREF="/workshop/graphics/jupglobe.gif">
<AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
349,74,367,105,337,85,324,85,307,77,303,60,307,50"
HREF="/workshop/graphics/satglobe.gif">
<AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,
393,80,383,86,381,75,376,69,376,56,380,48,393,44"
HREF="/workshop/graphics/uraglobe.gif">
<AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
435,77,445,92,456,77,463,72,463,62,462,53,455,47"
HREF="/workshop/graphics/nepglobe.gif">
<AREA SHAPE="circle" COORDS="479,66,3"
HREF="/workshop/graphics/pluglobe.gif">
</MAP>