Creating Image Rollovers
Problem 4: I want to create those cool buttons whose appearance changes when the mouse moves over them. How do I do that?
Image rollovers are probably the most widely used scripts on the Web. Implementing them is as simple as changing the src attribute of an <img> element when the mouse moves over the image:
<img name="about" src="aboutOff.gif">
Then in your script:
document[img].src = img + 'On.gif';
document[img].src = img + 'Off.gif';
When the user moves the mouse into or out of the image area, the anchor tag calls either the on or off function, passing a reference to the associated image as the img argument. The on and off functions swap the src attribute value to the appropriate image. Note that the <a> element is required only due to Netscape 4's inability to access an <img> element's src attribute directly (it doesn't recognize the events in the <img> element)—you don't need the anchor tag in Netscape 6 or in IE.