Adobe Creative Suite 3 Video Workshop

Home / Design Center / Tutorials

Creating rollovers in Dreamweaver

Joseph Lowery


This video shows you how to create a simple rollover in Dreamweaver. You learn how to import graphics from Fireworks to use for rollovers, and how to insert them on your web page. You also learn how to apply behaviors to add the rollover functionality.

Requirements

To follow along with this article, you will need the following software and files:

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Creating rollovers

  1. In Fireworks, choose File > Open and choose the home_navigation.jpg file. Click Open. This file contains two versions of the same navigation bar, one showing the Up or untouched state and one showing the Over state.

    Each button in the navigation bar is individually sliced and ready for export.

  2. Click the Show Slices button to show the slicing guides (see Figure 1).

    The navigation buttons are sliced and ready for export to Dreamweaver.

    Figure 1: The navigation buttons are sliced and ready for export to Dreamweaver.

  3. Click any button to reveal the individual button filenames. For this tutorial, all of the individual GIFs have been already brought into the sample Dreamweaver site for you.
  4. Go to Dreamweaver, and open the 10_rollover.html file.

  5. Start by placing your pointer in the menu navigation area (see Figure 2).

    Insert your pointer in the green navigation area of the web pages, where you will add an image

    Figure 2: Insert your pointer in the green navigation area of the web pages, where you will add an image.

  6. Choose the Common tab (or menu) in the Insert bar. Next to the Image button, click the arrow to display the pop-up menu, and choose Rollover Image. This opens the Insert Rollover Image dialog box.

  7. In the Insert Rollover Image dialog box, choose the following options:

    • For Image Name, type home.
    • Click the Browse button next to Original Image and choose images/navigation/home-up.gif.
    • Click the Browse button next to Rollover image and choose images/navigation/home-over.gif. This image will appear when the user's mouse button rolls over the object.
    • For Alternate Text, type Home.
    • For the URL, type home.html. On clicking the button, the user will be directed here, which is the point of a navigation bar button.

  8. Click OK to insert the image on the page in its Up state (see Figure 3). You can follow the same process to add multiple buttons.

    The rollover image is inserted into the navigation bar in its Up state.

    Figure 3: The rollover image is inserted into the navigation bar in its Up state.

  9. In the Insert bar, choose Rollover Image from the Image button pop-up menu.

  10. In the Insert Rollover Image dialog box, choose the following options:

    • Type products for the Image Name.
    • Click the Browse button next to Original Image and choose images/navigation/product-up.gif.
    • Click the Browse button next to Rollover Image and choose images/navigation/product_over.gif.
    • Make sure that Preload Rollover Image is selected. This option is important, because users rolling over the button for the first time won't experience a delay. Selecting this option loads the alternate image with the initial web page, not when the rollover is activated.
    • Type Products for the Alternate Text.
    • Type product.htmlfor the URL.
  11. Click OK to insert the rollover image.
  12. In the Document window, select the Products image.

  13. Choose Window > Tag Inspector to open the Tag inspector panel group and choose the Behaviors panel. Notice that two behaviors are applied to the image, Swap Image and Swap Image Restore (see Figure 4).

    Rollover images have two behaviors applied by default, Swap Image and Swap Image Restore.

    Figure 4: Rollover images have two behaviors applied by default, Swap Image and Swap Image Restore.

Creating rollovers manually

Rather than use the Rollover Image button, you can manually apply rollover behaviors to an image to create the effect.

  1. In the Insert bar, click the Image button. In the Select Image Source dialog box, choose the company-up.gif file, and click Choose.
  2. Type Company for the Alternate Text, and click OK.
  3. In the Property inspector, type Company in the Name text box. This creates an ID for the image in the JavaScript.
  4. Type company.html in the Link text box.
  5. Select the image in the Document window.
  6. In the Behaviors panel, click the Add Behavior button and choose Swap Image from the pop-up menu.
  7. Next to Set Image Source, click Browse and choose the company_over.gif file. Click OK to add the behavior. This is essentially the same process as inserting the Rollover Image button from the Insert bar.
  8. To complete the navigation bar, click the Image button in the Insert bar.
  9. In the Select Image Source dialog box, choose the events_up.gif file and click Choose.
  10. Type Events for the Alternate Text, and click OK.
  11. In the Property inspector, type Events in the Name text box. Type events.html in the Link text box.
  12. Select the image.
  13. Return to the Behaviors panel. Click the Add Behavior button and choose Swap Image.
  14. Next to Set Image Source, click Browse and choose the events_over.gif file. Click OK to add the behavior.
  15. Choose File > Save.
  16. Choose Preview in Browser to review your work. Every time you press the mouse button over one of the buttons, the image will change accordingly.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.