BLHteacher | Resources | Project
How to create images which change when the mouse passes over themTo produce the effect shown in the example above, you must do two things:
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
- Process mouse events for images
- Change an image after it has already been loaded
onMouseOutevents for the image.
The hyperlink object, supports the
onMouseOutevents. 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
srcwhich contains the URL of the image being displayed. To change the image, simply assign a new image URL to the image object's
documentobject contains an array property called
imageswhich 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.
© 2000 BLHteacher. All rights reserved.