Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 263

Figure 5-20 Hotspot added for the main stage

rectangular
hotspot covers the
main stage

Dreamweaver
created a map
name by adding
“Map” to the
image name

alt text for
the ma i n
stage h otspot

pointer, rectangle,
circle, and polygon
hotspot tools

◗

6. Repeat Steps 3 and 4 to create hotspots for the other three stages, replacing the
stage name in the alt text for each hotspot.

◗

7. Save and close the page. Later, you will link the hotspots to the text they
reference.

Creating Rollovers
A rollover is an image that changes when the pointer moves across it. In actuality, a
rollover enables two seemingly stacked graphics—the original graphic and the rollover
graphic—to swap places during a specifi ed browser action, such as a mouseover, and
then to swap back during another specifi ed browser action, such as when the pointer is
moved off the images. The two graphics must be the same size.

Inserting Rollovers
You can insert rollover buttons that change when the user points to them and that link
the user to another page when the button is clicked. When you use the Rollover Image
button to create rollovers, Dreamweaver does more than just create code to make the
images swap. After you fi ll in the requested information in the Insert Rollover Image dia-
log box, Dreamweaver creates all the code to make four separate things happen:

You can create navigation
with a group of rollovers
using a navigation bar
(click the Navigation Bar
button in the Images list in
the Common category of
the Insert panel), but keep
in mind that graphic navi-
gation is not accessible.

• The graphics preload when the Web page is loaded so that they are in place when a
browser action such as a mouseover occurs.
• The graphics swap occurs when the pointer is placed over the graphic.