How to Create Multiple Javascript Rollovers in Dreamweaver

Roll-overs on a web page cause an image to change when moused over by a visitor. Used in your menu links, this technique can help visitors navigate through your site with ease. If your website design requires that more than one area of a page changes when a visitor hovers over a link, Dreamweaver offers an easy way to meet your goal with Javascript--no coding required!

Difficulty: Moderate

Instructions

1. Create images in your image-building software. You will need separate base images and roll-over images for each area of the site you would like to change during a mouse-over. For seamless rollovers, the both the base and hover images for a single roll-over should be the exact same size and should have the same background. Save your images as web-ready JPEG or GIF files.

2. Add your first rollover. In your Dreamweaver file, click the cursor where you want your base roll-over image to appear. Now, click the arrow beside the image icon in your toolbar (it is the icon that looks like a picture of a tree). From the drop-down menu, choose "Rollover Image." You may also click Insert > Image Objects > Rollover Image from the main Dreamweaver MX menu bar.

3. Add your base and hover images using the "Insert Rollover Image" dialog box. Give your image a specific name. You will use this name when adding your second roll-over. Insert your base image and your rollover image using the first two "browse" buttons. Check the "Preload rollover image" box to instruct browsers to load the rollover image at the same time all other images are loaded when a page is opened.

4. Configure the link for your first roll-over. Next to the text box labeled "When clicked, go to URL:", browse for the file to which your roll-over will link. When complete, click the OK button at the right of the dialog box. Save your file and open it in a browser to make sure the roll-over link is working the way you envisioned.

5. Add an additional roll-over that will activate when your original image is moused over. Return to Dreamweaver and insert the base image for your second roll-over. Open the Behaviors window. Highlight your base image, and click the "+" drop down menu from the Behaviors window to add a new Javascript behavior. Choose "Swap Image" from the behavior list. From the file list in the dialog box, choose the file name you designated for your first roll-over's original image. Then, browse for the second roll-over's hover image using the "Browse" button. Click "OK" and your second roll-over should be configured. Save your file and review it in a browser again. When you mouse over your original roll-over image, both your original image and your second roll-over image should switch as you configured.