Rollover Images and Navigation Bars


Probably the most commonly used Dreamweaver behaviors are the Swap Image and Restore Image behaviors because rollover buttons and interactive navigation bars are extremely popular. Creating rollovers is very easy in Dreamweaver, both for the use of buttons and for altering other images on the page. Let's take a look at some of the different methods that can be used to change the various images on your pages.

Creating a Rollover Image

The concept of a rollover image is relatively straightforward. When you place your mouse cursor over an image, an image on the page is changed. The changed image most commonly is the image that was rolled over, but other images can be altered as well.

The easiest way to create a rollover image in Dreamweaver is to place your cursor at the place in the page where you want the rollover inserted and choose Insert, Image Objects, Rollover Image from the menu bar. The Insert Rollover Image dialog box, shown in Figure 28.5, enables you to name the image, specify the locations of the original image and rollover image, and choose what alternative text and URL should be assigned to the rollover. If you don't want the rollover to be a button, simply leave the URL field blank.

Figure 28.5. The Insert Rollover Image dialog box helps you create a rollover image.


When you create a rollover (or any object, for that matter), it is a very good practice to provide a name for the object that is meaningful to you. Dreamweaver, by default, names objects with generic names such as "Image1" and "Form1." Although it might be easier just to leave these names, it makes it more difficult when you need to interact with the items, as you'll see in a bit. So be sure that you type a meaningful name like "homeButton" for a navigation button that returns your visitors to the home page.

Another important aspect of this dialog box to note is the Preload Rollover Image check box. It is a good idea for you to always leave this box checked for rollovers. If you don't preload the image, the first time a visitor rolls over the image, it will load from the server, and if the server is busy or slow, the visitor might be presented with a broken image. For that reason, preloading rollovers can ensure consistency in the way your site displays. After you have entered the appropriate values, click OK and Dreamweaver places the image in your page (see Figure 28.6).

Figure 28.6. The rollover image has been placed in the page.


Note

Dreamweaver displays the original image only in the Design view. To see the rollover in action, you need to preview it in your browser.


Designing Remote Rollovers

If you already have an image placed in your page and want to swap out a different image on the page when the first is rolled over, you can do that by using the Swap Image behavior. This is where uniquely naming your objects comes in handy. For instance, suppose that the Retro's Cycles site has a series of buttons on the page that say "Honda," "Yamaha," "Suzuki," and several other motorcycle manufacturers. The client has asked that when you roll over any of those links, an image below changes to display one of the manufacturer's motorcycles. Basically, the buttons change to a secondary image when rolled over.

To accomplish this, select a button and click the plus sign on the Behaviors panel. Choose Swap Image from the menu and Dreamweaver displays the Swap Image dialog box, shown in Figure 28.7.

Figure 28.7. The Swap Image dialog box enables you to change an image's source.


In the Swap Image dialog box, choose the image that you want to change. This is where naming your images something logical comes in handy. Because I named the image "targetMotorycleimg," I can more easily identify it than I could if it were named "Image4." With the target image selected, type or browse to the image to which you want to swap. Leave the check boxes so that the image is preloaded and restored to its original state when the mouse is rolled off the button. Click OK and Dreamweaver adds the Swap Image and Swap Image Restore behaviors to the page. Note also that the Swap Image behavior uses the onMouseOver event handler and the Swap Image Restore behavior uses the onMouseOut event handler (see Figure 28.8).

Figure 28.8. The behaviors have been added to the page and are manageable via the Behaviors panel.


To see the remote rollover in action, preview the page in a browser and roll your mouse over the button to which the behavior was assigned. Figure 28.9 shows the image in its native state, and Figure 28.10 shows what happens when you roll over the button.

Figure 28.9. The image in its native state.


Figure 28.10. The image is changed when the button is rolled over.


Creating Navigation Bars

Now that you know how to create single instances of rollover buttons, imagine being able to easily create a collection of them that would result in an entire navigation bar for your site. Well, hold on tight, because Dreamweaver can do just that!

To create a navigation bar, place your cursor in the page where you want the navigation bar to be inserted and then choose Insert, Image Objects, Navigation Bar from the menu bar. The Insert Navigation Bar dialog box, shown in Figure 28.11, looks complex, but it's relatively straightforward when you break it down.

Figure 28.11. The Insert Navigation Bar dialog box helps you create interactive navbars.


Table 28.2 provides a look at the various fields in the Insert Navigation Bar dialog box and the function they perform.

Table 28.2. Insert Navigation Bar Dialog Box Fields

Name

What It Does

Navbar elements

Displays the various images that you have added to the navbar. Each element in the navbar must have at least a unique name and an up image value. The plus sign and minus sign button add and remove elements, respectively.

Element name

Provides a unique identifier for each navbar object. The unique name ensures that the swap image and restore image behaviors are performed on the correct object when interaction occurs.

Up image

Provides the source of the image in its natural state.

Over image

Provides the source of the image when the object is moused over.

Down image

Provides the source of the image when the object is clicked.

Over while down image

Provides the source of the image when the object is clicked and the mouse button is held down.

Alternate text image

Provides alternate text for accessibility.

When clicked, go to URL

Provides the target URL that is opened when the object is clicked.

in

Determines whether the link is opened in the existing window or in a different window (especially useful in framed sites).

Preload images

Determines whether or not images are preloaded before the page is displayed. This check box should generally be left checked.

Show "Down Image" initially

Determines whether the down image is initially displayed before the button is ever rolled over.

Insert

Specifies whether the navbar should be built horizontally or vertically.

Use tables

Specifies whether Dreamweaver should use tables or CSS to build the navbar.


For each button in the navbar, you need to create an element and specify its settings. You can also reorder the objects by using the up and down arrows to place the objects in the correct order. When the final navbar is built, a horizontal bar has the item at the top of the list at the far left and the item on the bottom of the list at the far right. Vertical bars list the objects in the same order that they appear in the elements list. After you have completed the list, click OK and Dreamweaver inserts the navigation bar into your page (see Figure 28.12).

Figure 28.12. Dreamweaver adds a navigation bar to the page based on your criteria.


Just as with the rollover buttons, Dreamweaver displays only the initial state of the buttons in the design view; to see the buttons in action, you need to preview them in your browser.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net