One image was created that looks like a number of buttons and text was applied to the "buttons". A map with co-ordinates equal to the number of pixels for each button was created and is part of this HTML document.

The map references these co-ordinates to URL's.

To look at the Map information and see how it is created, you will need the following instructions:

Netscape Users
Load this page full size, then select "DOCUMENT SOURCE"FROM THE "VIEW MENU" to see the source code.

Explorer Users
Simply click on this page with the "right" mouse button and select "View Source" from the drop down window.

<IMG BORDER=0 SRC="buttons/buttons2.gif" USEMAP="#BUTTONS2" ISMAP ALT="Client-side Map" hspace="2"></A>

<MAP NAME="BUTTONS2">

<AREA SHAPE="rect" COORDS="1, 285, 105, 304" HREF="b16main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 266, 105, 284" HREF="b15main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 247, 105, 265" HREF="b14main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 228, 105, 246" HREF="b13main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 209, 105, 227" HREF="b12main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 190, 105, 208" HREF="b11main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 171, 105, 189" HREF="b10main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 152, 105, 170" HREF="b09main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 133, 105, 151" HREF="b08main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 114, 105, 132" HREF="b07main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 95, 105, 113" HREF="b06main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 76, 105, 94" HREF="b05frames.html" TARGET="_top">

<AREA SHAPE="rect" COORDS="1, 57, 105, 75" HREF="b04sidebar.html" TARGET="sidebar">

<AREA SHAPE="rect" COORDS="1, 38, 105, 56" HREF="b03main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 19, 105, 37" HREF="b02main01.html" TARGET="main">

<AREA SHAPE="rect" COORDS="1, 1, 105, 18" HREF="b01main01.html" TARGET="main">

<AREA SHAPE="rect" HREF="index.html" TARGET="_top" COORDS="0,0,106,304">

</MAP>

Anatomy of the tag:

<AREA SHAPE="rect" COORDS="1, 285, 105, 304" HREF="b16main01.html" TARGET="main">

1. <AREA
   • the start of the tap for client-side maps.
   
   
2. SHAPE="..."
   • Used to describe the shape of the "hot-spot"
   • Options are "rect"angles, "circ"les and "poly"gons
     1. We have a rectangular shape, so we are required to define two opposite corners (in pixels).
        • Use a program like Paint Shop Pro to locate the proper pixels.
   • The first two co-ordinates indicate the Top Left corner
   • The last two co-ordinates indicate the Lower Right corner
   
   
3. HREF="..."
   • Refers to the HTML document that will be loaded when the mouse button is pressed over the associated co-ordinates.
   
   
4. TARGET="..."
   • Indicates which "frame" is to be loaded with the HTML document.
   • Not necessary if you are not using frames.
   
   
5. >
   • Don't forget to close the tag!

1. The first set of co-ordinates shown above will be the "last button" on the "image" and the last set of co-ordinates will be the "first button".

2. The "COORDS=TLx, Tly, BRx, BRy" indicate in pixels, an area of the map that is "sensitive" to mouse clicks and the name following "HREF=" indicates the name of the HTML document that will be displayed when you press the mouse.