IN THIS CHAPTER
How to pre-cache images
Swapping images after a document loads
Creating interactive, client-side image maps
Drawing vector graphics with a canvas
For modern web browsers, images and areas—those items created by the
<area> tags—are first-class objects that you can script for enhanced interactivity. You can swap the image displayed in an
<img> tag with other images, perhaps to show the highlighting of an icon button when the cursor rolls atop it. And with scriptable client-side area maps, pages can be smarter about how they respond to users' clicks on image regions.
One further benefit afforded scripters is that they can preload images into the browser's image cache as the page loads. With cached images, the user experiences no delay when the first swap occurs. The need for this capability has diminished slightly with higher bandwidth connections, but it still isn't a bad idea for those users who still rely on connections with speed limitations.
For HTML element properties, methods, and event handlers, see Chapter 26, "Generic HTML Element Objects."