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

• The graphics swap occurs again when the pointer is moved off the graphic.
• If a URL is specifi ed in the When clicked, Go to URL box of the Insert Rollover Image
dialog box, the user is hyperlinked to the new page when the graphic is clicked.

Technically, a rollover is a JavaScript behavior. JavaScript is a scripting language
that works with HTML. A JavaScript behavior is a set of JavaScript instructions that tell
the browser to do specifi ed things. After you enter the image name, the original image
source fi le, the rollover image source fi le, and a URL, if appropriate, Dreamweaver adds
the JavaScript for you.
The image name is the name that appears in the Property inspector when one of the
rollover graphics is highlighted. The image name does not replace the fi lename of either
graphic you designate. The image name must begin with a letter or an underscore and
cannot have any spaces or special characters. Use a descriptive name that includes
the word roll or rollover to remind you that a graphic has rollover behaviors attached
to it. Unless the word roll or rollover appears in the image name, you cannot tell that a
graphic has rollover behaviors attached to it without looking at the code or previewing
the page in a browser.

Inserting a Rollover
• In the Common category of the Insert panel, click the Rollover Image button in the
Images list.
• In the Image name box, type a name for the rollover image.
• Click the Original image Browse button, navigate to the file you want to insert as
the original image, and then double-click the image.
• Click the Rollover image Browse button, navigate to the file you want to insert as the
rollover image, and then double-click the image.
• Click the Preload rollover image check box to check it.
• In the Alternate text box, type alternate text for the image.
• Click the When clicked, Go to URL Browse button, navigate to the page to which you
want to link, and then double-click the filename.
• Click the OK button.

You'll create a rollover for the NextBest Fest logo in the home page. Then, you'll
replace the existing logo in each page of the Web site with the new rollover.

To insert a rollover image in the featured div in the home page:

◗

1. Open the index.html page in Design view, select the TICKETS text in the fea-
tured div, and then press the Delete key. The text is deleted from the div.

◗

2. In the Common category of the Insert panel, click the Images button arrow , and
then click the Rollover Image button. The Insert Rollover Image dialog box opens.

◗

3. In the Image name box, type featured_roll . Remember, the image name cannot
include spaces. Whenever you see the name in the Property inspector, you'll be
reminded that the image has rollover behaviors.

Be sure to type the image
name without spaces;
otherwise, the rollover
behavior will not work.

◗

4. Next to the Original image box, click the Browse button, navigate to the
Tutorial.05\Tutorial folder included with your Data Files, and then double-click
tickets.png . A copy of the tickets.png graphic is added to the graphics folder, as
you can see from the path in the Original image box.