You can create a rollover image using a combination of HTML and JavaScript. A rollover image is basically an image that changes when the mouse hovers over it.

How to create a rollover image

Change an image when the mouse pases over it.

Making an image change when the mouse passes over it is very simple. To create this effect you do not actually need to use the script tags of JavaScript or declare the script in any way. Instead, you can put your JavaScript commande directly into the "ONMOUSEOVER" event of an image. The following example shows you how you can change an image's source when the mouse hovers over it.

In the example above, the "ONMOUSEOVER" event will detect if the mouse goes over the picture. If it does, then it will execute the code stored between the single quotes. In this example the image's source will become "after.gif". The result is that when the page is loaded you will see "before.gif". This image will be displayed until the mouse is brought over the picture. Once the mouse in over the picture "after.gif" will be displayed in its place. However, once the mouse is pulled away from the picture it will remain "after.gif". If you wish to bring back the original image when the mouse leaves the picture area then you should read on to the next example.

How to create a rollover image

Change an image when the mouse leaves the image area.

If you wish to have an image change when the mouse is no longer on it, the same principle as the "ONMOUSEOVER" example can be applied. To do this, instead of using the "ONMOUSEOVER" event, you must use the "ONMOUSEOFF" event. The following rollover image example will show you an image that is displayed as "before.gif" when the mouse is not over it. It will then display as "after.gif" when the mouse hovers over it and return to "before.gif" when the mouse is pulled away from it.