Intermediate Dreamweaver

Basic HTML | Site management | Assets | Library of Page Elements| Find and Replace | Templates | Style Sheets | Forms | Imagemaps | Mouseovers | Flash buttons & text | Frames | Tables: Formatting & Sorting | Preview Browsers | Font Lists | Colors | Automating Tasks | Pasting in a Script

MouseOver/Rollover Images

Home Home

To make a mouseover-- an image that changes when the mouse is moved over it-- you need two images: one the image that appears when the mouse is not on it: Example button up, and one the image that appears when the mouse IS on it: Example button down

Once you have created and saved those images, then click at the point in your document where you want to insert the mouseover. From the Insert menu, choose Image Objects, then Rollover Image.

In the dialog box that comes up, enter:

Insert Rollover window

  • Image Name: a unique name for the image combination-- this is used to make the image swap
  • Original Image: the filename of the image that should show when the mouse is NOT on it.
  • Rollover Image: the filename of the image that should show when the mouse is over the image.
  • Enter the Alternate Text for the image in the Alt Text Field.
  • When Clicked, Go to URL: the filename or URL to link the graphic to.

Click Ok to finish.

February 6, 2004