JavaScript & jQuery: The Missing Manual, 2nd Edition

Chapter 7. Improving Your Images

Web designers use images to improve a page’s design, decorate navigation bars, highlight elements on a page—and to show the world what fun they had on their last vacation. Adding an image to a web page immediately injects interest and visual appeal. When you add JavaScript to the mix, however, you can really add excitement by dynamically changing images on a page, presenting an animated photo gallery, or showing off a series of photos in a self-running slideshow. In this chapter, you’ll learn a slew of tricks for manipulating and presenting images on your website.

Swapping Images

One of the most common uses of JavaScript is the simple image rollover: When you move your mouse over an image, it changes to another image. This basic technique has been used since the dawn of JavaScript to create interactive navigation bars whose buttons change appearance when the mouse hovers over them.

But in the past couple of years, more and more designers have turned to CSS to achieve this same effect. However, even if you’re using CSS to create interactive navigation bars, you still need to understand how to use JavaScript to swap one image for another if you want to create slide shows, image galleries, and adding other types of interactive graphic effects to a web page.

Changing an Image’s src Attribute

Every image displayed on a web page has a src (short for source) attribute that indicates a path to a graphic file; in other words, it points to an image on a web server. ...