Image rollovers in Javascript

We firstly need to create the function that will be called when the user puts their mouse over an image.

function rollover(imageObj,newImage)
   imageObj.src = newImage;

This function is fairly simple and requires the two images as arguments.

Event handlers

To attach the function to the images we need to use the onmouseover event handler and the onmouseout event handler.

<img src="image1.png" onmouseover="rollover(this,'image2.png')" onmouseout="rollover(this,'image1.png')" />

Note how the this object has been used to get the image object so that its location can be changed without searching for the image element.




No tags