O'Reilly logo

JavaScript® Bible, Seventh Edition by Paul Novitski, Danny Goodman, Tia Gustaff Rayl, Michael Morrison

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

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 <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 26, "Generic HTML Element Objects."

Properties

Methods

Event Handlers

align

 

onabort

alt

 

onerror

border

 

onload

complete

  

dynsrc

  

fileCreatedDate ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required