Mouse Events

The idea is to change an image when the mouse is over it. Also, when the user selects it and dialog window will come up telling them where they are going.

Here are the necessary functions

function over_image(imgName)
 {document [imgName].src = "iST.gif";}

function left_image(imgName)
 {document [imgName].src = "UW.gif";}

function clicked_on_image()
 {alert("Going to UW");}

The html for the image appears below

<A HREF="http://www.uwaterloo.ca/home.html"
         onMouseover = "over_image('crest')"
         onMouseout = "left_image('crest')"
         onClick = "clicked_on_image()">
<IMG border = 0 name="crest" SRC="UW.gif" width=101 height=122></A><P>

Note: That the image has to be named, so that the functions can address and change it.

Here are the full path to the images, so you can try this out:

http://www.dcs.uwaterloo.ca/~anderson/JavaScript/iST.gif
http://www.dcs.uwaterloo.ca/~anderson/JavaScript/UW.gif

Test the above in an HTML form.

Back