Chapter 4. WORKING WITH ROLLOVERS

You've seen rollovers a million times. You mouse over an image, and the image changes. You mouse off the image, and the image changes back to its original state. Rollovers are an easy way to make your site more interactive.

This chapter will show you how to create a good rollover. This involves:

  • Telling JavaScript to detect the mouse event that will trigger an image swap

  • Telling JavaScript which of several images to swap in, based on the mouse event

  • Replacing the old image with a new one

I'll also teach you a new way to detect which browser a visitor is using.

A Real-World Example of Rollovers

To begin, let's take a look at rollovers in action. Tin House (http://www.tinhouse.com), one of my favorite literary journals, ...

Get The Book of JavaScript, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.