CSIM Test & Demonstration

     There must be several ingredients when preparing Client Side Image Maps. You need an image (src="ldbike.gif"). To the image you must add the a location where the coordinates for the mouse clicks are gathered (MAP name="Bike"). You must also connect the two together. (usemap="bike" {in the image} and name="Bike" {in the MAP statement}) Next you need the various co-ordinates and what you want done when someone clicks on them. (the area tag and its attributes and arguments). The following is a reasonable example.

<center><img src="ldbike.gif" border=0 usemap="#Bike"></center>

This is the beginning statement of CSIM. If "Bike" were on a different page, you would use the complete URL to it. You must refer to the image name by "#name". This may be somewhat criptic. If you don't understand the description, e-mail me

<MAP NAME="Bike">

The name in the MAP tag above must be identical to the one in the "usemap=" (in the <img> tag) above. The <img> statement and the <map> statements do not have to be close together. They can be almost anywhere, as long as "usemap=" can find "name=".

<AREA

SHAPE=default
HREF="#default"
onMouseOver="window.status='You are not on a link. If you click here, you will go to - default.';return true"
onMouseOut="window.status='CSIM Demonstration'; return true">
"Shape=Default" means that if the reader clicks somewhere on the image where there is no link, it will go here by "default".

<AREA

SHAPE=POLY
COORDS="311,6,384,6,372,63,342,60,341,36,310,32,313,4,315,5,311,6"
HREF="mailto:nor@synapse.net?subject=CSIM mailto test"
onMouseOver="window.status='This is the handlebar and e-mail link.';return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

This is the worst example to start with but it's here anyway. First it uses the "shape=poly" coordinates — there is a bunch of them. (This is why I use "Map-This")
Second, rather than lead to an HTML file, it points to an e-mail message. To add confusion, it also uses onMouseOver and onMouseOut - both are Java-isms that work in Netscape 3.0.

<AREA

SHAPE=RECT
COORDS="299,39,339,101"
HREF="#headset"
onMouseOver="window.status='This takes you to the headset.';return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

This is a simplified version of above. This one uses "shape=rect" and points to text on the headset portion of the text.

<AREA

SHAPE=RECT
COORDS="349,161,371,186"
HREF="#fhub"
onMouseOver="window.status='This takes you to the front hub section.'; return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

<AREA

SHAPE=CIRCLE
COORDS="359,174,88"
HREF="#fwheel"
onMouseOver="window.status='This takes you to the front wheel section.'; return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

This is the same as the others except that "shape=circle".

<AREA

SHAPE=RECT
COORDS="177,164,233,234"
HREF="#crankset"
onMouseOver="window.status='This takes you to the crankset section.'; return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

<AREA

SHAPE=RECT
COORDS="178,145,205,164"
HREF="#fderailleur"
onMouseOver="window.status='This takes you to the front derailleur.'; return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

<AREA

SHAPE=RECT
COORDS="80,161,106,181"
HREF="#rhub"
onMouseOver="window.status='This takes you to the rear hub section.'; return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

<AREA

SHAPE=RECT
COORDS="78,186,112,223"
HREF="#rderailleur"
onMouseOver="window.status='This takes you to the rear derailleur.'; return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

<AREA

SHAPE=CIRCLE
COORDS="93,172,85"
HREF="#rwheel"
onMouseOver="window.status='This takes you to the rear wheel.';return true"
onMouseOut="window.status='CSIM Demonstration'; return true">

</MAP>