Image Maps

PAGE (3 of 4)

Client Side Map Example

 

The following image of the world contains links to more detailed images of each continent. Client side image maps, in most browsers, have the behavior of indicating the linked document URL on a status line as the cursor is positioned over the image map regions.

The IMG tag specification is given by the following HTML:

<IMG SRC="world.gif" WIDTH=254 HEIGHT=131 BORDER=0 ALIGN=bottom usemap="#world">

The "world" map file specification is given by the following HTML:

<MAP NAME="world">
<AREA SHAPE="rect" COORDS="66,56,107,109" HREF="samer.gif">
<AREA SHAPE="rect" COORDS="57,119,212,132" HREF="antarctica.gif">
<AREA SHAPE="polygon" COORDS="130,18 176,7 163,26 165,48 160,53 150,41 145,33 129,30 122,36 126,25 130,18" HREF="europe.gif">
<AREA SHAPE="polygon" COORDS="141,93 160,58 144,42 122,38 116,49 120,61 134,62 141,93" HREF="africa.gif">
<AREA SHAPE="circle" COORDS="203,73, 40" HREF="australia.gif"><AREA SHAPE="circle" COORDS="31, 2, 83" HREF="namer.gif">
<AREA SHAPE="circle" COORDS="163,7, 69" HREF="asia.gif">
<AREA SHAPE="rect" COORDS="0,0,254,131" HREF="imagemapcs.html">
</MAP>

The last rectangle shape is a default link specification. The coordinates specify the entire image. It indicates the document to be referenced if a user clicks on a region of the image which is NOT covered by a previous specified link. It must be entered as the last shape tag in a map to prevent it from trapping or overlaying all other shape links.

 


© CS Dept Va Tech, 1997.

All rights reserved.