To create a mouse rollover in Dreamweaver MX
You will need two images - one for when the mouse is off (which will be the normal appearance on the page) another for when it is on. Create these in a graphics program - on this site we created buttons 85 by 15 pixels, made the background invisible and typed black text directly on the button. This was saved as "button.gif". This gif was then re-coloured by flooding the black with red and saved as "buttonon.gif", the "on" describing that this is the button to be shown when the mouse rolls on to the button. Save your buttons in a separate folder for convenience. Note that in Fireworks an image is saved as "png" format by default. You need to export the png file and save as gif. This means that you can go back to the png file to make changes later.
1. In the Document window, place the insertion point where you want the rollover
2. Insert the rollover using one of these methods:
• In the Insert bar, select Common, then click the Rollover Image icon.
• In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
• Choose Insert > Interactive Images >Rollover Image.
The Insert Rollover Image dialog box appears.
3. In the Image Name text box, type a name for the rollover.
4. In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file's path in the text box.
5. In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file's path in the text box.
6. If you want the images preloaded in the browser's cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option.
7. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
8. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image.
9. Click OK to close the Insert Rollover Image dialog box.
10. Choose File > Preview in Browser or press F12.
11. In the browser, move the pointer over the original image.
The display should switch to the rollover image.