Remote rollover exercise 7a

In this exercise you will learn how to use behaviors in Dreamweaver to create remote rollovers. By remote rollovers, I mean images that change on a different part of the page, not underneath the image you put the mouse over. This is useful for image galleries where you use thumbnail images and want a larger image to load when you put the mouse over the thumbnail.

You will be using the files from exercise 5a, YOU MUST have completed exercise 5a in order to do this exercise...

Before you begin, download the exercise files and drag them into your images1 folder

  1. open index1.html
  2. save as gallery1.html
  3. in the code or split view, delete all the text in the content div tag (the box should be completely empty)
  4. create a new CSS rule and title it .contentImage
    • select the Background category
      • Background-color: #000
    • select the Box category
      • Width: 600px
      • Float: Left
      • Padding: 9 for all
      • Margin: 0 for all
  5. create a new CSS rule and title it .contentThumbs
    • select the Type category
      • Color: #FFF
    • select the Background category
      • Background-color: #000
    • select the Box category
      • Width: 182px
      • Float: Right
  6. from the INSERT/Common panel, click Insert div tag
    • Insert: At insertion point
    • Class: contentImage
  7. click at the end of the new code and hit enter or return
  8. from the INSERT/Common panel, click Insert div tag
    • Insert: At insertion point
    • Class: contentThumbs
  9. in the code, select the Content for class "contentImage" Goes Here and delete
  10. insert the following file from the images1 folder:
    • 04.jpg
  11. in the code, select the Content for class "contentThumbs" Goes Here and type gallery
  12. highlight gallery
  13. select Heading 1 from Format in the Properties inspector
  14. click and the end of <h1>gallery</h1> and hit return or enter
  15. insert the following file from the images1 folder:
    • 01_thumb.jpg - 12_thumb.jpg
  16. create a new CSS rule and title it .contentThumbs h1
    • select the Type Category
      • Font-size: 18px
      • Font-weight: lighter
      • Color: #FFF
    • select the Box Category
      • Padding/Top: 9px
  17. create a new CSS rule and title it .contentThumbs img
    • select the Box Category
      • Padding/Top: 9px
      • Padding/Right: 12px
exercise files
  1. click on the image that you want to use as the remote rollover with (this is the area that will change when you put the mouse over the thumbnail)
  2. in the properties inspector, type "main" in the image ID field (circled in red)

 
  1. click on each of the thumbnails added in step 15 to set the image ID for all of your thumbnails (if you don't do this, they will be hard to recognize in the Swap Image window). use thumb1, thumb2, thumb3, thumb4, etc for the IDs.
  2. select the 01_thumb.jpg image
    note: the large image was changed in the example below to show you where the rollovers occur. DO NOT change the large image in DW, leave the image there that you started with.
  1. now open the Tag Inspector by clicking the tab on the top right of the palette
  1. click the Behaviors button,
  2. click the + icon to access the drop down menu, select Swap Image
  1. in the Swap Image window, select the image "main ", then click Browse... to set the source
  1. browse to the images1 folder and select the image you wish to swap, in this case, 01.jpg
  2. click Choose
  3. Make sure Preload Images is checked (this will start the images loading when the page loads) and Restore images onMouseOut may be checked or not (this will load the original images when the mouse is moved off of the swapped image)
  1. you're swap image is now complete! Verify that the behaviors are listed in the Tag Inspector as per the example below
  1. File>Save
  2. File>Preview in Browser... select at least 2 different web browsers
  3. repeat steps 16 - 24 for the remaining thumb images