The Steps
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 in Fireworks to use for your rollovers in Dreamweaver.
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 fit 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 buttonover.png. Change the fill color and border color. When you are finished update your changes by selecting File Save.
3. Export both .png files (depending on how simple your images are, you can probably get away with PNG 8).
button.png |
buttonover.png |
4. Make a Dreamweaver document called "rollover.html". Use your buttons by using the Insert->Rollover Image command. A dialog box will appear directing you to the buttons (button.png and buttonover.png) you have just created. Click on Browse... to point to the correct files in your images folder.
Rollover example
(the blue link button to the assignments page at the top left of this page is also rollover)
5. Save your document and Preview in 2 browsers to see if the rollover worked.
6. Add at least three rollover buttons to rollovers.html. Each button must be different. Experiment with the Effect menu, gradients and text layers on your buttons. Try making some with text or text and/on images. Make sure the images in each pair of buttons are the same size!
7. Add a rollover to one of your existing pages. Provide a link on rollovers.html to the page with the additional rollover.
8. Make sure your assignments page includes links to rollover.html and the rollover project page.
9. Fireworks has a built-in button editor (Edit -> Insert -> New Button). Create a four-stage button (up, over, down, over while down) using the editor and export the button as HTML and Images. Insert your button into your rollover.html page by inserting Fireworks HTML from the Insert menu.
The Assignment
1. Create rollover.html, so that:
- Rollover.html contains at least three rollovers using buttons created with Fireworks.
- Rollover.html contains at least one link to another page to which you have added a rollover AND a description of those rollovers.
- Rollover.html contains a button, created in Fireworks, that has four different states: Up, Over, Down, Over While Down.
2. At least one additional rollover appears on a page other than rollover.html (see bullet 2 above).