Image handling


Skip navigation.

Site search

Site navigation

Details and download

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.

Click to test the image preloader.

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";


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.

This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.