Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Modifications

To finish your design, it's necessary to move to Dreamweaver. For example, the tabs currently animate out on MouseOver, but they do not animate back on MouseOut. This behavior is easily corrected in Dreamweaver.

  1. Open the interface.htm file provided in the Project 6 folder. This file is just like the one you exported, but it is updated with a background tile and a page title.

  2. Select the hotspot over the shop portion of the button's image. Open the Behaviors panel and be sure that Show Events is set to 4.0 and Later Browsers. (You do this by clicking on the Plus (+) sign icon and selecting Show Events for | 4.0 and Later Browsers.)

  3. Choose the Swap Image behavior from the Plus (+) sign icon Events drop-down list. When the dialog box appears, select tab_default from the list of Images and then click the Browse button to locate the shoptab_up.gif animation in the Animations folder. Uncheck the Preload and Restore options and click OK to keep your settings.

  4. Figure 6.16 Adjust the Swap Image behavior so that an animation is used in place of the static tab_default image.

  5. Change the second onMouseOver Event to onMouseOut in the Behaviors panel. (You do this by clicking on the down arrow to the left of the Swap Image text and selecting onMouseOut from the drop-down list.)

  6. Figure 6.17 Change the mouse event from onMouseOver to onMouseOut in the Behaviors panel.

  7. Repeat this process for each of the remaining hotspots. Each time, you will select the tab_default image but choose the correct animation for the hotspot selected. You will be using only the up versions of the animations. Remember to uncheck the Preload and Restore options each time.

  8. Select the shop hotspot. In the Behaviors panel, double-click the onMouseOut Swap Image listing. Adjust the onMouseOut behavior to reset the central photo back to the original photo.jpg image when the mouse rolls off.

  9. Highlight the photo image in the list and click the Browse button. Locate the photo.jpg image in the Images directory and click OK. Repeat these steps for the remaining hotspots.

    Figure 6.18 Change the onMouseOut behavior to reset the central photo image.

  10. Save your file and preview it in your browser.

  • + Share This
  • 🔖 Save To Your Account