How to Insert Rollover Images Perfectly Using Dreamweaver

December 9th, 2009

A rollover image changes when the mouse pointer moves over it. These images can be effectively used in navigation bars. This method is used as a web design trick as well as a blogging technique.Whenever a user points over a link n the navigation bar, the corresponding image changes.

A rollover Image consist of two images: the primary image and the secondary image. The primary iage is the original image and the secondary image is the image that is visible when the pointer moves over the original image. Both the primary and the secondary images should be of the same size. In case they are of different sizes, Dreamweaver resizes the secondary image to the size of the primary image. In order to apply the rollover effect to an image, first, create two images, one each for primary image and secondary image respectively. THen, insert the primary image in your Web Page. Click the images and do one of the following:
- On the insert menu, click the Image objects and Further select the Rollover Image command.
- On the common option of the Insert bar, click Rollover Image.

After selecting the options, the Insert Rollover Image dialog box appears. Give all the options and click OK.
The original Image will be displayed in the document. To see the rollover effect, preview the page in a browser and move the mouse pointer over the image. On mouse over, the image is replaced with the rollover Image.

Popularity: 3% [?]

Leave a Reply