Coding, Programming Tutorials - Changing images on mouse over using Javascript

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:

<SCRIPT LANGUAGE="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";

//-->
</SCRIPT>

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.

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 <A> 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 <SCRIPT> tags, inside the HTML head or in an external JavaScript (.js) file. We can then call this function with appropriate arguments from the event handlers.

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

function roll(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

//-->
</SCRIPT>

This function expects two arguments, one is the image name and the other is the image source. The function is called from onmouseover and onmouseout event handlers and the two parameters are passed to it.

Changing images on mouse over using Javascript

Comments / Feedback