JavaScript Image Rollover Generator
This may be the easiest JavaScript image rollover generator producing
copy 'n paste code that really works.
The generated code is designed to make it safe to put more than
one rollover image on the same web page without function clash.
The generated image HTML
Put the image HTML code where the image is to be displayed.
The generated JavaScript
Put the JavaScript in the source code somewhere above or somewhere below the location of rollover image (the location of the generated image HTML) —
-
Above, if you want the rollover image preloaded before the first image is displayed.
-
Below, if you want the first image to display before the rollover image is preloaded.
See the "About Image Preloading" section, below, for more information.
Generating Code for Another Rollover
To generate more code, click here or reload this page.
About Image Preloading
There are two image loading distinctions, those that are visible when a web page first loads and those that might become visible later.
If only the visible images are loaded first, the page can render more quickly. After the visible images are loaded, when they won't slow down the page, then the "maybe later" images can preload in anticipation of being needed.
That's how it works with this rollover code. The first image is loaded and displayed. Later, the second image is preloaded. When the mouse cursor moves over the first image, the preloaded second image can replace it instantly.
Now, if the user moves the mouse cursor over the first image before the second image has had time to finish preloading, then the rollover will lag until the second image is ready.
Because of the possibility of a lag for fast users, there is the argument that the preloading should occur before the first image displays. It's a valid argument. The only downside I see is that the original image then takes a bit longer to display when the page first loads.
Because I prefer fastest page loads, my preference is to preload images after the immediately visible images have been loaded. However, if you prefer to preload before the first image is displayed, simply move the JavaScript toward the top of the page. It can even be put into the HEAD area.
The browser runs any JavaScript not within functions when the JavaScript is encountered. Thus, where you put the JavaScript in the source code influences when preloading takes place.
Will Bontrager
©Copyright 2006 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
