Easy-to-Use Image Rollover

This is a very simple Javascript code for creating image rollover effects. A function is created in Javascript to carry out the command, and the rest is HTML.

The function is first called when the image is rolled over. The parameters of the function are the tags id and the new image to be used (in the JS, 'images/' is already specified as the image directory. Change/remove depending on your personal directory settings).

After the image is rolled over, the JS is called with the parameters. The first part will find the tag using the ID specified, and the second part will change the SRC of the image with the second parameter.

When rolling out of the image, the same function is called with the same ID, except this time we change the second parameter back to pic1 (or whatever). This will make the picture switch back to it's original state.

All you need to remember is to change around arguments and IDs for each image. You can also use 'innerHTML' rather than 'SRC' if you want, but you will have to make some changes to the code.

Download Source Code imagerollover.zip ( 0.00Mb )

NEVER open a .exe, .bat, .cmd, or other executable file since that is where viruses are likely to live. Please virus scan all files you download.

Please login to post comments.

Page 1 of 1

Easy-to-Use Image Rollover

Simple External Interface
Check List
BasketBall Game
BioBattleship Game
Mad Lib

BioBattleship Game
Depth of Field Calculator
Rich Text Editor (minimal & progressive enhancement)
Make maxlength='' work on textarea tags
To Do List (With Effects)