Image rollovers

The legacy DOM allows you to accomplish one common special effect: dynamically replacing one image on the page with another. This is often done for image rollovers, in which an image changes when the mouse moves over it. The images[ ] array of the Document object contains Image objects that represent the document's images. Each Image object has a src property that specifies the URL of the image to be displayed. To change the image that is displayed, simply set this property to a new URL:

document.images[0].src = "newbanner.gif";

To use this technique for an image rollover, you must use it in conjunction with the onmouseover and onmouseout event handlers that are triggered when the mouse moves on to and off of the image. Here is some basic HTML code with JavaScript event handlers to accomplish a rollover:

<img name="button" src="b1.gif"



 onmouseover="document.button.src='b2.gif';"



 onmouseout="document.button.src='b1.gif';">

When an image is going to be dynamically displayed, it is helpful to preload it into the browser cache so that there is no network delay before it appears. You can do this with a dynamically created off-screen Image object:

var i = new Image(); // Create Image object



i.src="b2.gif";      // Load, but don't display image

Comment an article   Name   E-mail    Title Available characters: 4000  Notify me of follow-up comments Enter what you see:

No comment posted