jim's jimnasium helps you Create a Personal Web Page

This page has a sample of the popular JavaScript function onMouseOver. The normal action is to change the image shown for an A HREF= tag while the mouse is over the image. This is accomplished ny having two images downloaded, one that is shown until the mouse comes over it, the second shown when the mouse actually is positioned on top of the image. In the example below, the two images are the same, with just the color changed in the second image.

Move the mouse over the image

onMouseOver (and onMouseOut) are predefined JavaScript event handlers. The browser will automatically look for those functions when encountering these reserved words in the HTML tags.

In this example, the image onMouseOver_R.gif (in red) is loaded with the page. When the mouse is passed over the image, a second image, onMouseOver_G.gif, will be loaded at the same place. When the mouse is moved off the image, the red image is reloaded.

To keep the process running fast, all images should be downloaded with the page. As described above, the second image wouldn't be downloaded until the MouseOver event occurred. This could take some time. There are two ways to get the images all loaded. One is to preload the images by adding the JavaScript within the <HEAD> tag for the document:

<SCRIPT LANGUAGE="JavaScript">
<!-- //hide from browsers
       a.src = "imageURL.gif"
       a.src = "imageURL.gif"
          etc. for each image needed
//-->
</SCRIPT>

The other method is to include each image in an IMG tag at the bottom of the page, with the HEIGHT and WIDTH values set to 1, sometimes creating a small dot as the images are loaded. (Like this, for the red and green images: I made BORDER=1 for the green image to see where it is.)

The HTML used code to perform the rollover above is:

<a href="#"   
<!-- Stay here if you click this (replace # with URL for real link). -->
  onMouseOver="document.myImage.src='onMouseOver_G.gif'"
<!-- Says that the source of the image in the IMG tag named myImage, -->
<!-- when the mouse is over it, is the green one. -->

  onMouseOut="document.myImage.src='onMouseOver_R.gif'">
<!-- Says that the source of this image in the IMG tag named myImage, -->
<!-- when the mouse is moved off the image, is the red one. -->

<img src="onMouseOver_R.gif" name="myImage" width=350 height=55 border=0>
<!-- Says that the source of this image when first loaded is the red one. -->
<!-- It also says the name of the image is myImage, so it can be referenced by the scripts. -->

</a>

PRESS YOUR BROWSERS BACK BUTTON TO RETURN
Copyright © 1997 by Jim Hanson.
This page hosted byGeocities Free Web Space Get your own    Free Home Page