How to Add Rollover Images in Adobe Dreamweaver

  • google plus

In Brief...

A rollover image is a linked image that changes when the user mouses over it and changes back when the user mouses off of it. Rollover images are commonly used in navigation menus. If you were hand-coding them, you would have to use JavaScript or CSS, but Dreamweaver does that magic for you. For each menu item (navigation link) there are two images: a normal image and an "on" image.

Instructions

To add a rollover image, follow these steps:

  1. Open your file in Dreamweaver.

  2. Delete all the links in the navigation menu.

  3. With the cursor at the beginning of the page, in Dreamweaver CC 2015, select Insert > HTML > Rollover Image. (You could also use the Common Insert panel.)
    Insert HTML Rollover

  4. In the Insert Rollover Image dialog box enter the following:
    • Image name: Image names cannot contain spaces.
    • Original image: Browse and choose an image to use.
      Original Image
    • Rollover image: Browse and choose an image to use.
      Rollover Image
    • Preload rollover image: Checked. This forces the browser to preload the rollover image so that there is no delay in the rollover effect.
    • Alternate text: Add descriptive text.
    • When clicked, Go to URL: Browse to index.htm.
      Rollover Dialog

You can test the rollover effect in Live View:

  1. Click on Live View in the Document toolbar.

  2. Point your mouse at the image to see it change.
    Rollover in Action

Author: Tracy Berry

Tracy has been a senior graphic designer/programmer, instructor, and consultant since 1993 and has developed hundreds of logos, marketing materials, websites, and multimedia solutions for customers worldwide, including involvement in large corporate software rollouts. She has helped many organizations optimize and streamline data solutions. She teaches both onsite and online courses and has her CTT (Certified Technical Trainer) certification. Tracy specializes in teaching graphics, desktop publishing, web design, reporting/productivity applications, as well as the creation of online courses with software from leading vendors.

Discuss