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.

Browse, Browser, Browsest

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...]


At a later time, Tim Berners-Lee, the inventor of the World Wide Web, remarked that he should have used slashes throughout the URL instead of dots (period signs) in the domain name. I wonder what would have happened to the file name and the extension? Would he have replaced the dot with the slash in it too? [more...]

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