Dreamweaver MX Tutorials >>New Tutorials >> Creating Anchor Links

Dreamweaver MX & Fireworks MX: Creating Rollover Images

Step 1: Inserting the Rollovers

1. Open "rollover_start.html"
2. Place your cursor in the first table cell

3. From the Insert Menu, select Insert > Rollover Image
4. You can type in a name for the Image name and override Dreamweaver's default naming convention
5. Set the Original and Rollover images by using the Browse button or by typing in the names. If you type in the image name be sure you type the path to the images correctly. I generally prefer to use the Browse button for the first image and then copy and paste the name for the Rollover image and make the necessary name changes.
6. Dreamweaver will select "Preload Rollover Image" by default. Leave that option selected.
7. Type in a descriptive name for the Alternative Text field. This is the text that is displayed when a the cursor is over the image
8. Use the Browse button to navigate to the page you want the link to visit when clicked. You can leave this blank for this exercise and Dreamweaver will automatically set the link to a "null link" by placing the pound sign (#) in the Link field. Null links are temporary links that will not go anywhere but are needed for setting up the rollover image.
9. Continue adding the rollovers for the remaining two buttons

Step 2: Editing the Rollover Images

At point you may need or want to go back and change one of your rollovers after you've created them. You can easily do this by using the Behaviors Panel.

1. Select the image you want to change
2. To change the Up state of the button, click the Browse For File icon in the Property inspector and browse to the new image.
3. To change the Over state of the image, go to the Behaviors Panel, double-click the (onMouseOver) Swap Image behavior. This is why naming your images when you set this up is so important.
4. The image you select is the Up state of the image. That is the name that is highlighted in the Images field.
5. Set Source to lets you change out the Over image for the currently selected image. In this case, we selected the Services button and if we change the Set Source to image, we'll have a different Over state for the Services button.