How to Add Rollover Images in Adobe Dreamweaver
To add a rollover image, follow these steps:
- Open your file in Dreamweaver.
- Delete all the links in the navigation menu.
- 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.)
- 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.
- Rollover image: Browse and choose an image to use.
- 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.
You can test the rollover effect in Live View:
- Click on Live View in the Document toolbar.
- Point your mouse at the image to see it change.