How Rollovers Work

To understand how rollovers actually work, we have to understand how JavaScript sees the world. When a Web page is loaded into a browser, the browser does more than just format and present the HTML for the user to look at. Behind the scenes, the browser also has a JavaScript engine that examines the page as it is being loaded and organizes the page into a formal structure that it can understand. For example, when the JavaScript engine sees the <body> tag, it creates an object called “document” and places all the parts of that page into the document object.

JavaScript follows certain rules when dissecting and organizing a Web page. For example, all of the images on the page, whether they're massive things or tiny, single-pixel ...

Get Advanced JavaScript™: Insights and Innovative Techniques 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.