JavaScript: onMouseOver, PreCaching Images

 

onMouseOver

We saw in the previous lesson that 'onMouseOver' could be used in image swaps and to put text into the status bar. A simple, common type of image swap gives text a slightly different appearance when the cursor is hovering over the text. Let's do an example of this use of 'onMouseOver' and 'onMouseOut'.

 

Example

<BODY>

<a href="javascript:location=
http://www.amazon.com/exec/obidos/ASIN/034536676X/o/ qid=973803980/sr=2-1/102-4992658-0404919"

onMouseOver="document.garp.src='garp2.jpg'"

onMouseOut="document.garp.src='garp1.jpg'">

<img src="garp2.jpg" name=garp border=0>

</a>

to see this how this code behaves in a new window.

The images 'garp1.jpg' and 'garp2.jpg' were created in PhotoImpact. The link is to an appearance of the novel The World According to Garp on amazon.com.

As with the example in the previous lesson, the <IMG> object is given a name ('garp'). 'onMouseOver' and 'onMouseOut' both use the name of the object to assign an image ('garp1.jpg' or 'garp2.jpg') to the object.

 

PreCaching Images

It is a good idea to have the browser download the images in your document from the start, when the browser is downloading the document itself. This is called 'precaching' the images. The advantage of precaching is that, once the images are downloaded, they are immediately available to the viewer of the page (for example, in an image swap). The assumption is that a viewer is more tolerant of waiting for images to load while the page initially loads than of waiting for images to load when he is already involved in viewing the page.

 

Example 2

Let's take a look at the 'Bones' example from the previous lesson to see how to precache the images. The images we want to precache are: 'bones1txt.jpg', 'bones1.jpg', 'bones2txt.jpg' and 'bones2.jpg'. We could precache these images with this lines of script:

image1 = new Image
image2 = new Image
image3 = new Image
image4 = new Image
image1.src = "bones1txt.jpg"
image2.src = "bones1.jpg"
image3.src = "bones2txt.jpg"
image4.src = "bones2.jpg"

The first 4 lines declare that image1 through image4 are Image objects. The second 4 lines associate each Image object with a particular image. It is the second 4 lines that actually force the browser to precache the images.

We might also modify the link commands to take into account the precaching that was done. The link commands could be re-written like this:

<td>
<a href="javascript:location='http://yahoo.com'"

onMouseOver="document.bones1.src=image2.src"

onMouseOut="document.bones1.src=image1.src">

<img src="bones1txt.jpg" name=bones1 width=134 height=150 border=0></a>

<br><center>1967</center>

<td> <a href="javascript:location='http://imdb.com'"

onMouseOver="document.bones2.src=image4.src"

onMouseOut="document.bones2.src=image3.src">

<img src="bones2txt.jpg" name=bones2 width=112 height=150 border=0></a>

<br><center>2000</center>

to see this how this code behaves in a new window.
Try to notice the precaching taking place. The precaching may take a few moments as the images load while the document loads. Then when you do an image swap, since the images have precached the images should swap instantaneously.

In the above script, instead of using the actual names of the images ('bones1.jpg' etc.) we use the names of the Image objects to which the images have been assigned. For example, since 'bones1.jpg' was assigned to an Image object named 'image2,' we use 'image2.src' instead of 'bones1.jpg' in the 'onMouseOver' command.

 

Other Resources

Try these links on image precaching and image swaps:


Page Link
Image Flip Using 'onMouseOver' http://www.htmlgoodies.com/primers/jsp/article.php/3478271
PreCaching Images www.webdeveloper.com/library/qanda.html#preloadim

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on your own page or on eEverything.com. Use Image objects and the 'image.src' syntax to precache 2 images. Then modify the script you wrote in the previous lesson to use the 'image.src' syntax in the 'onMouseOver' and 'onMouseOut' commands to make the image swap work.

If you work on eEverything.com, you can precache 'vcr1.gif' and 'vcr2.gif.'