JavaScript Examples Bible - UserWorks Technologies

Image, Area,
and Map Objects
(Chapter 22)
The IMG element object is a popular scripting target,
largely because it is easy to script it for effects such as
mouse rollovers. Moreover, the element’s scriptability extends
backward in time to all but the very first generation of scriptable
browsers. Playing a supporting role in image rollovers is
the abstract Image object, which scripts use to pre-load
images into the browser’s cache for instantaneous image
swapping. Even though the two objects manifest themselves
differently within script operations, they share properties and
methods, making it easy to learn their capabilities side by
side.
AREA and MAP element objects work closely with each
other. In practice, an AREA element resembles an A element
that is set to work as a link. Both elements create clickable
“hot spots” on the page that typically lead the user to other
locations within the site or elsewhere on the Web. They also
share a number of URL-related properties.
Examples Highlights
✦ Most IE browsers can load both still and motion images
(such as MPEG movies) into an IMG element. Listing 22-3
shows how to swap between still and motion images via
the dynsrc property.
✦ The page created from Listing 22-4 lets you compare the
performance of swapping images with and without precaching.
You also see how to have scripts rotate images
on a timed schedule.
✦ Watch how the IMG element’s onLoad event handler can
trigger actions in Listing 22-5.
✦ A powerful Listing 22-7 demonstrates how scripts can
fashion new client-side area maps when a different picture
file loads into an IMG element.
6
C H A P T E R
✦ ✦ ✦ ✦
In This Chapter
How to precache and
swap images
Invoking action
immediately after an
image loads
Creating interactive,
client-side image
maps
✦ ✦ ✦ ✦