JavaScript: The Definitive Guide, 6th Edition

Scripting Images

Web pages include images using the HTML <img> element. Like all HTML elements, an <img> element can be scripted: setting the src property to a new URL causes the browser to load (if necessary) and display a new image. (You can also script the width and height of an image, which will make the browser shrink or enlarge the image, but that technique is not demonstrated here.)

The ability to dynamically replace one image with another in an HTML document opens the door to a number of special effects. One common use for image replacement is to implement image rollovers, in which an image changes when the mouse pointer moves over it. When you make images clickable by placing them inside your hyperlinks, rollover effects are a powerful way to invite the user to click on the image. (Similar effects can be achieved without scripting using the CSS :hover pseudoclass to alter the background image of an element.) The following HTML fragment is a simple example: it creates an image that changes when the mouse moves over it:

<img src="images/help.gif"
    onmouseover="this.src='images/help_rollover.gif'"
    onmouseout="this.src='images/help.gif'">

The event handlers of the <img> element set the src property when the mouse moves over or out of the image. Image rollovers are strongly associated with clickability, so this <img> element should still be enclosed in an <a> element or given an onclick event handler.

In order to be useful, image rollovers (and similar effects) need to be responsive. ...