Soup up your image map

The above code is simpler than it may look at first. It defines two functions, leftDescription() and rightDescription(). When either of these functions is called, the appropriate text is displayed in the text area named description in the form named orderForm.

Now all we have to do is call JavaScript functions instead of URLs when the user clicks. We'll do this by defining the image map like this:

<MAP NAME="brainMap">
<AREA NAME="leftHalf" COORDS="0,0,112,112"
HREF="javascript:leftDescription();">
<AREA NAME="rightHalf" COORDS="0,0,225,225"
HREF="javascript:rightDescription();">
</MAP>

In this example, when a user clicks the left side of the image, the browser invokes the leftDescription() function. Similarly, when a user clicks the right side of the image, the code invokes the JavaScript function rightDescription().

Notice that when called from within an HREF, the name of the function to be invoked must be preceded by the javascript: string (for instance, HREF="javascript:leftDescription()"). This lets the browser know a JavaScript statement is coming up.

Now we just need to define some place to put the output text.

<IMG NAME="currentImage"
SRC="../../Images/java.window.gif" width=225
height=125 ALIGN="TOP" USEMAP="#brainMap">
<FORM NAME="orderForm">
<TEXTAREA NAME="description" COLS=40 ROWS=4>
</TEXTAREA>
</FORM>

That's it. We've used HTML to tell the browser to use the brainMap image with java.window.gif. We've also defined a form called orderForm and inserted a text area in it called description. Now, when we click the map, the proper function activates and fills the text area with a description of the brain.