Mr. O'Connell's Technology Home Page

home courses biography links

Rollover Image Tutorial

This tutorial explains how to put a rollover image into an existing web page that already has a Master Table. The tutorial presupposes that the image have already been formatted to the same size and resolution. Image file formats can be mixed- a .jpg can paired with a .gif , or a .png in any combination.

  • Open the page in Dreamweaver
  • Click the cell where you want the rollover image to appear
  • Insert<Image Objects<Rollover Image
  • In the Image Name field, fill in short logical names for both images (e.g. Cat and Dog)
  • Original Image:
    • Click the Browse button located to the right of the field.
    • Choose the image you want the end user to see first.
  • Rollover Image:
    • Click the Browse button located to the right of the field.
    • Choose the image you want the end user to see when they roll their mouse over the image.
  • In the Alternate Text field, fill in short logical names for both images (e.g. Cat and Dog)
  • In the When clicked, go to URL: field, paste in the address of the website you want the end user to go to when they click the rollover image.
  • Click Okay
  • Save your work
  • Test the page
  • You're done.

How is this useful?

  • Twice as many images can fit into the same space on the page.

  • The end user can interact with your page, and find hidden links.