Dreamweaver Rollovers

By CRAIG KUNCE

I use Behaviors in Dreamweaver to create the rollover actions on my portfolio pages. The proces is a little confusing, so let me try to walk through it step-by-step.

First, here is what I want to happen on my page:

When a viewer rolls over a thumbnail, three things happen

1. The thumbnail image changes to its rollover state
2. The large sample changes
3. the description changes

Step-by-step

1. Create your portfolio sample images in Photoshop (use your own art samples)
   Make your thumbs are the same size.
   Make your large portfolio samples are the same size too.
   Here is what my files look like:
   • thumbnail_1.gif
   • thumbnail_1_over.gif
   • sample_1.jpg
   • thumbnail_2.gif
   • thumbnail_2_over.gif
   • sample_2.jpg
2. Save your files to a folder in your web site in Dreamweaver
3. Place the sample_1.jpg on your web page
4. Then create and insert a div below that. This holds your text. Style is as want with CSS. I named my div print_description_box.
5. Then place your thumbnail_1.gif and thumbnail_2.gif below that—below your div!
6. Now you're ready to assign the Behaviors
7. Select the first thumbnail image and name it in the Properties ID box
   
8. Do the same with your other thumb and large sample image. I named my large sample image sample1.
9. With your first thumbnail image selected, go to Behaviors in the Tag Inspector
   
10. Click on the + and choose Swap Image
11. Deselect "Restore images onMouseOut"
    
12. Select "thumb1" in the Images menu. Then browse and select thumbnail_1_over.gif in Set source to:.
    
13. Remain in the same Swap Image box, and select sample1 from the Images menu. Browse to find sample_1.jpg. Also deselect Restore images onMouseOut.
    
14. Click okay
15. With thumbnail 1 image still selected, go back to the + icon in Behaviors and select Swap Image.
16. Click to deselect the Restore image onMouseOut
17. Choose thumb1 in the menu, and browse and select thumbnail_1.gif. This seems wrong, but just do it, trust me.
18. Click okay.
19. With thumbnail 1 image still selected, go back to the + icon in Behaviors and select Set Text > Set Text of Container.
    
20. Next choose your div "print_description_here" from the Container menu. Then type your new descrition in the box.
    
21. Click okay.
22. Your Behaviors menu should look like this:
    
23. Change onClick to onMouseOut by clicking on it and choosing the change from the menu
24. Change the third (bottom) onMouseOver to onMouseOut by clicking on it and choosing the change from the menu
25. Behaviors should now look like this:
    
26. Here's were you have to be patient… nothing will happen yet… not until you do the same thing to the second thumbnail.
27. So, now go back and do the same steps to your second thumbnail (or as many as you want)
28. Once you're finished, save all in Dreamweaver and test it in your browser.