JavaScript & jQuery: The Missing Manual, 3rd Edition

Chapter 7. Common jQuery Tasks

In web design, you constantly work with a reliable handful of elements: Images can enhance a page’s design and highlight web page elements. Links form the foundation of the Web, letting people jump from one piece of information to another, and you can control how those links work, whether in the same browser window or a new one. And when you’ve got lots of links, it’s good to know how to collect them in a top-notch navigation bar. jQuery can make all of these page elements more interactive and exciting. In this chapter, you’ll see how to use jQuery to make your images, links, windows, and navigation bars work better than ever.

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, it’s still useful to understand how to use JavaScript to swap one image for another if you want to create slide shows, image galleries, and add 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 ...