Image handling
See also my automated rollover script, which greatly simplifies the process of creating rollover and click effects.
Using the Image() constructor to preload images for use in mouseovers and pre-caching
Hang your mouse over the image to see it change. Click it to test the image pre-loader.
How it works
The mouseover
The following script is inserted into the document head, to cache the images, ensuring the rollover effect is fast:
<script type="text/javascript">
/**************************************
preload images for use in the mouseover
**************************************/
if( document.images ) { //check that changing images is supported
var overVariableImg = new Image(); overVariableImg.src = "LOCATION_OF_MOUSEOVER_IMAGE";
var outVariableImg = new Image(); outVariableImg.src = "LOCATION_OF_MOUSEOUT_IMAGE";
}
</script>The image may be placed anywhere on the document (if the link is in a positioned element -
<div style="position:absolute;" ...> Netscape 4 will nees the image to be in the same
positioned element), but I have chosen to put the image as part of the link. The image is defined using:
<img src="LOCATION_OF_MOUSEOUT_IMAGE" name="IMAGE_NAME" height="16" width="16" alt="" border="0">And the link is defined using:
<a href="Whatever"
onmouseover="if( document.images ) { document.images['IMAGE_NAME'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['IMAGE_NAME'].src = outVariableImg.src; }">The preloader
The preloader script is inserted into the document head and is available for you to use as a JavaScript header file. The preloader is designed to interact with progress bar scripts, such as my DHTML progress bar script which I have used here.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.