|
The Rollover Wizard A rollover image is an image that changes when the mouse moves over it. Dreamweaver has a wizard that makes it simple to create a rollover image. This wizard can be accessed by going to the Insert Menu and selecting 'Rollover Image'.
Before you insert your rollover onto the page, you must first create the original image as well as the mouseover image. Use your graphics program of choice and create two images at the same size. It's a good idea to name the images so that you can easily find them and know their purpose. Here is a sample: 
The first image was 100 x 20 pixels. It was named 'image'. The second image had the same pixel dimensions, used the same font (with a different color), and was named 'imageover.' After you have created the images, you are ready to insert them into the wizard. Select Rollover Image from the Insert Menu and you will see a dialog box that looks like this: 
You must first assign the Rollover a name in the 'Name' field. This is helpful if you plan on modifying the rollover later. You must then find the Original Image. You can browse for it on your local computer. Dreamweaver will link to it as it would if you inserted an image in the normal fashion. Once you have the path to your original image, you must do the same with the 'Rollover' image. It is recommended that you leave the 'Preload Rollover Image' checked. This way the browser will download the image when the page loads. If this is unchecked, the browser will download the image when the mouse is moved over it. This could cause a delay until the image is downloaded which would usually lose the effect. You can also have your rollover go to a certain URL by entering the URL in the last field of the dialog box. In the example above, we used '#' as the url. Click on OK and you should see the original image on your page. From there you can move it to wherever you would like and can further modify it. You can select the image and have all the standard image options in the Properties Toolbar. You can change the 'Link' field to a new URL. You can add Alt text, a border, change the alignment, assign a target value, etc. This is not the only way or the best way to insert a rollover into Dreamweaver, but it is the easiest way. We will be looking at a more advanced means of inserting Rollovers when we talk about Behaviors later in the tutorial. |
