The JavaScript function can be placed in the HTML head or in an external JavaScript file (.js) so that it loads right at the beginning of the document.This function expects four arguments. The function is called from onmouseover and onmouseout event handlers and the four parameters are passed to it.
To facilitate smooth image rollovers in JavaScript, it's recommended that the images are preloaded so that the extra trip to the server is saved when the visitor moves the mouse over the image and the image changes immediately. Preloading is the process by which all images that are to be used for roll-overs are loaded along with the document.
Here is the code:
The code above assumes that the images are located in the same directory as the HTML file. If the images are placed in another directory, use relative URLs for the images in the preloader script as well for passing arguments to the rollover function.
Let's consider you have 10 images being used as icons on a web page and since you have read the previous article, you plan to have JavaScript image rollovers for each image. Writing JavaScript code inside the for each image becomes very messy, not to mention, very troublesome and error prone.
A simple solution would be to collect the code into a function that can be placed between


Search
Categories


Print Article
Send to a friend
Save as PDF