How to Add Rollover Links in Dreamweaver MX

Rollover links in a website design allow you to change or highlight an image when a visitor mouses over it. This feature can be an effective way to help visitors navigate through your site and understand your linking structure, especially if you are using images for your links rather than text. Dreamweaver MX offers an easy way to include rollover links in your web page without having to worry about the actual coding. Here's how it's done.

Things You'll Need

• Dreamweaver MX installed on your computer
• Software to create your web-ready images (i.e. Photoshop or Fireworks)

Instructions

1. Create your images in whatever image-building software you have. Adobe Photoshop or Macromedia Fireworks are great options. You will need a main image that will be inserted in your web page, as well as a separate image that will appear when a visitor mouses over the first one. For seamless rollovers, both images should be the exact same size and should have the same background. Save the two images as web-ready .jpeg or .gif files in your website directory.

2. Launch Dreamweaver and open the website in which you would like to add the rollover links. From the "Files" window, double-click the file that will contain your rollovers.

3. Click your cursor in the area of the web page where you want your first rollover link. Now click the arrow beside the Image icon in your toolbar. (It is the icon that looks like a picture of a tree.) When the drop-down menu appear, choose "Rollover Image." If you are not using your toolbar or the image icon has been removed, just click Insert > Image Objects > Rollover Image from the main Dreamweaver MX menu bar.

4. Add your rollover images using the "Insert Rollover Image" dialog box that appears. You may choose to give your image a specific name, or Dreamweaver will assign it one. This name is used if you would like more than one image on the page to change when your original image is moused over. Next, insert your original image and your rollover image using the first two "browse" buttons. Check the "Preload rollover image" box. This will instruct browsers to load the rollover image at the same time all other images are loaded when a page is opened.

5. Add alternate text for the image in the same dialog box. This text makes your site more accessible to all users, and also serves as a good opportunity to add keywords, even though your link will be an image.

6. Browse for the file to which your rollover will link. When complete, click the OK button at the right of the dialog box, and your original image should appear on your web-page file. Save your file and open it in a browser to make sure the rollover link is working correctly.