Rollovers

Creating Rollovers

How to create images which change when the mouse passes over them

To produce the effect shown in the example above, you must do two things:

Process mouse events for images
Change an image after it has already been loaded
To temporarily change an image when the mouse passes over it, and then to change it back when the mouse leaves, you need to process
onMouseOver and onMouseOut events for the image.
The hyperlink object, supports the onMouseOver and onMouseOut events. In order to detect whether the cursor is over an image, simply turn the image into a hyperlink and process the hyperlink's mouse events.
Changing an image after the document has been loaded
This is quite simple. All image objects have a property called src which contains the URL of the image being displayed. To change the image, simply assign a new image URL to the image object's src property.
The document object contains an array property called images which can be used to access every image in the document. You can index the array either by an integer or by the image's name (if it has one). For example, suppose we used the following HTML document to display images of three fruits:

If you are going to include images in your document that change in response to user activity, please consider the fact that it takes time for new images to be loaded from your server. Because of this, users with slow Internet connections might witness significant delays between user events and the display of the new images.

Advanced Rollovers