JavaScript® Bible, Sixth Edition

Chapter 20. Image, Area, Map, and Canvas Objects

IN THIS CHAPTER

• How to precache 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 <img> and <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.

New on the graphical JavaScript scene is the notion of a canvas, which is a graphical region that you can use to carry out graphics operations via JavaScript code. A few browsers already support canvases, so you can get started tinkering with them now.

Image and img Element Objects

For HTML element properties, methods, and event handlers, see Chapter 15.

Properties	Methods	Event Handlers
align		onabort
alt		onerror
border		onload
complete
dynsrc
fileCreatedDate
fileModifiedDate
fileSize ...