Rollover images are images that change (to a new image) when the mouse cursor is over them. They are easy to make using Dreamweaver. The hardest part is making and saving appropriate images before you start. In this assignment you will make some simple buttons using Fireworks.
1. Open a new Fireworks
document with a transparent background. Create an elliptical shape and make
it a color you like. Add a different color and thickness for the border using
the properties
inspector.
2. Modify the image to match the canvas size. Save this in your Images folder in Sites as button.png. To make another button similar to this one - Select File Save As and name it buttondown.png. Change the fill color and border color. When you are finished update your changes by selecting File Save.
3. Export both png files to gif files
button.png |
button.gif |
buttondown.png |
buttondown.gif |
4. Make a Dreamweaver
document called "rollover.html".
Use your button by using the Insert->Rollover Image command. A dialog
box will appear directing you to the buttons you have just created. Click
on browse to point to the correct files in your images folder.
Rollover
example
5. Save your document and Preview in 2 browsers to see if the rollover worked.
Project: Make a new page, or change an old one to include at least three rollover buttons. Each button must be different, and the images should be different only in color, or another appropriate way. Make sure the images are the same size!
Make sure your homepage includes links to rollover.html and the rollover project page.
To do more: Create a Flash button and put it on your rollover.html page
To do much more: Fireworks has a built-in button editor. Use this to create your own button designs and explore the script that controls the button's behavior. Experiment with the Effect menu, gradients and text layers on your buttons
