Demo 10a: Multiple Rollovers

Part One: ImageReady

1. Create a folder called "demo10" in your demos folder. Copy demo10.psd from the class folders into your demo10 folder.
   
   
2. Open up the demo10.psd file.
   
   
3. Go to Window>Rollovers. Select the tulips slice within the Rollovers pallette. Add a Rollover state. With the Rollover State selected, enable the visibility of the tulips rollover state layer set. Now click on the normal (non-Rollover) state of the tulips slice within the Rollover pallette. Notice the "Default Pic" layer is now visible again.
   
   
4. Go to Window>Rollovers. Select the daffodils slice within the Rollovers pallette. Add a Rollover state. With the Rollover State selected, enable the visibility of the daffodils rollover state layer set. Now click on the normal (non-Rollover) state of the daffodil slice within the Rollover pallette. Notice the "Default Pic" layer is now visible again.
   
   
5. Go to Window>Rollovers. Select the peonies slice within the Rollovers pallette. Add a Rollover state. With the Rollover State selected, enable the visibility of the peonies rollover state layer set. Now click on the normal (non-Rollover) state of the peonies slice within the Rollover pallette. Notice the "Default Pic" layer is now visible again.
   
   
6. NEW: In the Slice pallette, set the Alternate text for each page element: My Flowers, Tulips, Daffodils, Peonies, and Photo of Flower.
   
   
7. NEW: Select the slice that says "link to Demo 10b". In the Slice pallette, click on the drop down menu that says "Image" and select "No Image". Also, check the box that says "Text is HTML". This will insert text into your HTML document that says "link to Demo 10b" (we'll create a link later).
   
   
8. NEW: Select an image that would be a 'spacer' with no content. Go to the Slice pallette click on the drop down menu that says "Image" and select "No Image" Do this  for each of the slices that are spacers. This will cause ImageReady to automatically create a spacer.gif that is the correct size for each of these images.
   
   
9. Go to File>Preview in Browser to make sure it is working properly.
   
   
10. If so, go to File>Save Optimized As....
    *File name: demo10a.html
    *Save as type: HTML and Images
    *Settings: Other... Go to Tags Case: body; Attributes: rowspan; and make sure everything but the "Include GoLive Code" is checked.
    *Slices: All Slices
    
    
11. Upload the demo10 folder to the server, and create a link to your Demo 10 (demo10a.html) from your index page.