Creating a rollover image
You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the pointer moves across it.
Before you begin, obtain one or more pairs of images for the rollover. You create a rollover with two image files: the primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.
Rollover images are automatically set to respond to the
onMouseOver event. For information about setting an image to respond to a different event (for example, a mouse click) or about editing a rollover to display a different image, see Swap Image.
To create a rollover:
- In the Document window, place the insertion point where you want the rollover to appear.
- Insert the rollover using one of these methods:
- Complete the dialog box.
For more information, see Setting the Image Rollover dialog box options.
- Click OK.
- Select File > Preview in Browser or press F12.
You cannot see the effect of a rollover image in Design view.
- In the browser, move the pointer over the original image.
The display should switch to the rollover image.
- Inserting a navigation bar