There is a delay when you move your mouse over an image where the second image takes a while for it to be displayed on the screen.
Preload the secondary image.
Preloading images is a technique often used by web developers when they are incorporating Rollover Effects or other image scripts which work more quickly when the images for them are loaded within the browser's cache as soon as possible.
Here is how it is done:
- Get the size of your image, i.e. width and height
- Add the following code to your <head> section of your page:
pic1= new Image(100,25);
- The pic1 = new Image statement creates a new option for the image. The two numbers within the parenthesis is the width and height of the image.
- If you have multiple images, just continue with pic2, pic3, …
- The line with the URL is the URL to the image.