How to Insert Rollover Images Perfectly Using Dreamweaver

How to Insert Rollover Images Perfectly Using Dreamweaver

December 11, 2014 0 By mark

From time to time you may want to insert a rollover image to your website, but the question is how can you do it perfectly? What’s the best way to do it? I’m assuming that you just started learning about web design if you are reading this. So I will go into more details and hopefully help you  to understand this concept properly. After that you will be able to apply this technique to all your future websites.

A rollover image changes when the mouse pointer moves over it. These images can be effectively used in navigation bars and graphic links on the page, and also pages which you want to show before and after effects. 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. The 2nd images are usually loaded in the background or when the user has hovered over the main image.  A better way to do this is to preload the images.

A rollover Image consist of two images: the primary image and the secondary image. The primary image 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. If you are not able to get the results you after then hiring a professional web developer may save you time.