Demo 10b: Multiple Rollovers

Part Two: Dreamweaver

As before, the advantage to doing this is in Dreamweaver is that if you ever needed to duplicate this code into another document, you could simply copy and paste a table with that functionality and have it work in the new page. But we still needed to do the first step in ImageReady, to efficiently get the rollover images made.

1. Open demo10a.html in Dreamweaver. Select the text that says "Go to Demo 10b" and create a link going to demo10b.html. Save it (as demo10a.html).
   
   
2. Now save this document as demo10b.html. Change the link so it says "Go to Demo 10a" and set the link to go to demo10a.html.
   
   
3. Select the Tulips button. Go to Window>Behaviors. Select the first behavior listed. Press the "-" sign until all the behaviors are gone.
   
   
4. Repeat step 2 for the Daffodils button and the Peonies button.
   
5. Now click on each image in your page and take note of the Name associated with each image. This can be found at the very left of the Properties pallette after clicking on an image.
   
   
6. Select the Tulips button. Go to Behaviors>Swap Image. In the Images list, select the Image "pic", and set the source to the photo of the tulip (you will have to find it since Imageready gave it a name of its own). Once you've done that, go back to the Images list and select the Image "tulip". For this we will set the source to the tulip-over.gif.
   
   
7. Repeat step 6 for the Daffodils button and Peonies button, except set the source of the Image "pic" to the appropriate picture.
   
   
8. Test it in the browser to make sure it works. Upload it when done.