Annoyed by the slow rollovers in your website navigation menu ?
The solution is to preload the rollover images in the browser.

So that when a user hovers over the navigation item,
there is no delay in the rollover image being displayed.

A sample script is given below :

It preloads the 3 images (image1_roll.gif, image2_roll.gif and image3_roll.gif)
into the user's browser cache.

So when the user hovers over the navigation menu item,
the rollover effect gets displayed smoothly.

i dont know about is this script because i understand what you :P

but i may understand if you give me a example

:LE : real example

I still didn't understand logic behind this.

Okay. I'll explain it a bit more this time...
Picture this :

Suppose a navigation menu has an image with the name "image1.gif" and its corresponding rollover image as "image1_roll.gif".
On the full page load, only "image1.gif" will be 'called' by the browser.

When the user moves his mouse over that image, the browser now fetches another image "image1_roll.gif". On slow connections, this would cause a delay of a second or two, before that "image1_roll.gif" is downloaded and displayed.


Heres how the given javascript is useful.

In the following javascript code :

Preload1 = new Image();
Preload1.src = "image1_roll.gif";

First we declare an object Preload1 to be an image.
In the second like, we assign it the image source of "image1_roll.gif".

This makes the browser to call the "image1_roll.gif" image beforehand,
and download it & save it in the browser cache. (Not display it right there)

Now when the user moves his mouse over "image1.gif", the rollover image gets displayed 'immediately" without any delay. Because the rollover image has been already downloaded and cached previously by that javascript.

This results in a smooth rollover effect.

Nice code / script. Thanks for this buddy. Might try it soon.

is really useful for me, I am glad to read it here