WebDevelopersNotes logo

home-icon Home / JavaScript / Image rollover using javascript

Image rollover using javascript

Image rollover using javascript

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:

<script type="text/javascript">

var image1 = new Image();
image1.src = "moveup.gif";
var image2 = new Image();
image2.src = "movedown.gif";
var image3 = new Image();
image3.src = "an1.gif";
var image4 = new Image();
image4.src = "an2.gif";


Note: The preloader code should be placed in the HTML head, preferably before any other JavaScript 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.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The Times New Roman typeface is probably based on a font designed by William Starling Burgess some 30 years before. Times New Roman was created in 1931 by Victor Larden under the guidance of Stanley Morison. The typeface was commissioned by The Times UK. They approached Morison who had voiced his criticism of the typeface the newspaper had been employing. The Times ended up using Times New Roman for 40 years straight. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy