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 ...

Get JavaScript® Bible, Sixth 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.