Rollover Images

Contact Us or call 1-877-932-8228
Rollover Images

Rollover Images

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.

To illustrate, let's change our menu on index.html to use rollover images:

In your ClassFiles/Dreamweaver/Images folder you will see a Menu folder that looks like this:

For each menu item (navigation link) there are two images: a normal image and an "on" image. We will show the normal images in the menu by default and show the "on" images when the user hovers over them.

Watch as your instructor adds a rollover image by following the steps below. You can follow along in ClassFiles/Dreamweaver/Exercises/index.html or you can wait until the next exercise in which you will add additional rollover images.

  1. Open ClassFiles/Dreamweaver/Demos/index-rollovers.html in Dreamweaver.
  2. Delete all the links in the navigation menu.
  3. With the cursor at the beginning of the page, in Dreamweaver CS6 select Insert > Image Objects > Rollover Image, in Dreamweaver CC select Insert > Image > Rollover Image: (You could also use the Common Insert panel.
  4. In the Insert Rollover Image dialog enter the following:
    • Image name: Home (Image names cannot contain spaces).
    • Original image: Browse to ClassFiles/Dreamweaver/Images/home.gif
    • Rollover image: Browser to ClassFiles/Dreamweaver/Images/home-on.gif
    • Preload rollover image: checked. This forces the browser to preload the "on" images so that there is no delay in the rollover effect.
    • Alternate text: Home. This should be the same as the text on the image itself.
    • When clicked, Go to URL: Browse to index.html (or index-rollovers.html for this demo).

You can test the rollover effect in Live View:

  1. Click on Live View in the Document toolbar.
  2. Point your mouse at the Home image. You should see it change:
Next