Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

5.5 Rollover Images

Rollover images are among the most common user-interface elements on the Web,
especially when it comes to navigation buttons. You've almost certainly seen rollovers
in action, when your mouse moves over a button on some Web page and the image
lights up, or glows, or turns into a frog.

This simple change in appearance is a powerful way to inform a visitor that the graphic
is more than just a pretty pictureit's a button that actually does something. Rollovers
are usually used to announce that the image is a link.

Rollover graphics appear frequently
in navigation bars, like
the one shown at top. As your
cursor touches a rollover button
(top), the button changes
appearance (bottom) to
indicate that the graphic has a
functional purposein this case,
"I'm a link. Click me."

Behind the scenes, you create a rollover by preparing two different graphics"before"
and "after." One graphic appears when the Web page first loads, and the other appears
when your visitor's mouse moves over the first. If the cursor then rolls away without
clicking, the original image pops back into place.

This dynamic effect is achieved with the use of JavaScript, a programming language
that most Web browsers use to add interactivity to Web pages. Fortunately, you don't
need to be a programmer to take advantage of this exciting technology. Dreamweaver's
many prewritten JavaScript programs, called Behaviors, let you add rollover images
and other interactivity to your pages. (More about Behaviors in Chapter 12).

To insert a rollover image, start by using a graphics program to prepare the "before"
and "after" button images. Unless you're going for a bizarre distortion effect, they
should be exactly the same size. Store them somewhere in your Web site folder.

Then, in the document window, click where you want to insert the rollover image.
Frequently, you'll use a table to lay out your rollover buttons (Chapter 7), and insert
the image within a table cell. If you're using CSS to lay out your pages, as described
in Chapter 8, you might place the buttons inside a <div> tag, as in the CSS Layout
tutorial in Section 8.9.

Choose InsertInteractive ImagesRollover Image (or click the Rollover Image
button on the Common tab of the Insert bar). Either way, the Insert Rollover Image
dialog box appears (see Figure 5-15). Fill in the blanks like this:

This box lets you
specify the name,
link, and image files
to use for the rollover
effect. "Preload
Rollover Image"
forces the browser
to download the
rollover image file
along with the rest of
the page, avoiding
a delay when the
mouse moves.

Image name. Type a name for the graphic, if you like. JavaScript requires some
name for the rollover effect. If you leave this blank, Dreamweaver gives the image
an unimaginative namefor example, Image2when you insert a rollover.
However, if you plan to later add additional interactive effects (Chapter 12), you
might want to change it to something more descriptive, to make it easier to identify
the graphic.

Browse button #1. When you click the top Browse button, a dialog box appears
prompting you to choose the graphic you want to use as the "before" buttonthe
one that first appears when the Web page loads. (See Section 5.1 for more on choosing
graphics.)

Browse button #2. When you click the second Browse button, Dreamweaver
prompts you to choose the "after" graphic imagesthe one that will appear when
your visitor's mouse rolls over the first one.

Alternate text. You can give a text description for a rollover button just as you
would for a graphic, as described in Section 5.2.3.

When clicked, go to URL. Rollover images are most commonly used for navigation
elements that, when clicked, take the user to another Web page. In this box, you
specify what happens when your visitor actually falls for the animated bait and
clicks the rollover button. Click the Browse button to select a Web page from your
site (see Section 4.2) or, if you wish to link to another Web site, type an absolute URL
beginning with http://.

When you click OK, you return to your document window, where only the "before"
button image appears. You can select it and modify it just as you would any image. In
fact, it's just a regular image with a link and a Dreamweaver Behavior attached.

To see your rollover in action, preview it in a Web browser by pressing the F12 key or
using the FilePreview in Browser command.