Fun with Image Maps

image map
Click here to 
get information about Aisle 1 Click here 
to get information about Aisle 2

This is a very primitive example of a client-side image map. Unlike an entire graphic that serves as a link, an image map is a graphic that usually has two or more clickable areas that take the user to different sites. A client-side image map does not require a separate program running on a server to function. It relies solely on HTML.

To see how the image map works click on either island in the graphic above. If you have a recent version of any of the major web browsers this should take you to one of two separate documents: one for Isle 1, the other for Isle 2.

To see how this was done, if you are using Firefox select Page Source from the View menu of your browser to see the code in this document.

Note that there are two parts to the code that creates the image map. First, the image tag both places the image in the document and links the image to the map information using the usemap attribute. Second, the paired map tags enclose information about the name of the image map and about the areas being made clickable. These areas are defined both by their shapes and by their coordinates. In an image map the top-left corner of the image is defined as coordinates 0,0.

There are several possibilities for shapes within the image: circle ("circle"), rectangle ("rect"), and polygon ("poly"). To delineate a circle you give the horizontal,vertical coordinates (in pixels) of the center and then the radius. For a rectangle you give the top left and bottom right coordinates. For a polygon you give the coordinates of each corner of the figure. To make the rest of the image not covered by any of the internal shapes a link you use the designation "default" for the shape.

Click here to go to instructions for Exercise Five

Click here to go the main LIS 670 page