JavaScript: The Missing Manual

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 adds 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 Web site.

Swapping Images

Probably the single most common use of JavaScript is the simple image rollover: when 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 (for example, see www.monkeyflash.com/css/image-rollover-navbar/). 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 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 ...