Disjointed Rollovers

Previously, you have learned about a simple rollovers where you add a JavaScript event to an image. The image will change into another image when you put your mouse over it. Disjointed Rollovers is somewhat a similar concept. In this exercise, you will add a JavaScript event to an image. When you put your mouse over that image, that image with two other images on the page will change to different images. So the first image acts as a toggle switch to swap images on the page.

In this exercise, you will create 3 AP Divs with images in them. You will add a JavaScript event on one of the images and all three images will swap at the same time.

• Part 1 - Planning and Preparation
• Part 2 - Adding Content and JavaScript
• Part 3 - Rollover Summary
• Part 4 - Save and Upload

Part 1: Planning and Preparation

1. Create folder called examples, if do not have it already. Then create a sub-folder inside it called assets. The assets folder will contain all the pictures used in this exercise.
2. Open your browser, IE or Firefox. Go to Google Images search, click on the gear button at the top-right corner and select "Advanced Image Search" as shown in the image below.
   
3. Search for 6 completely different images we will use for this exercise:
• Search for three "dog" and three "cat" images, so a total of six images. Do it one at a time and save all of them inside the assets folder.
• Set the filter to find "medium" image size, somewhere about 300 to 400 px wide.
• Set the filter to find all images with a "wide" aspect ratio.
• You can set the usage rights to "not filtered by license". It should be ok to use sice we only use it for an exercise and not going to sell or modify it. However, you need to be careful and understand about using copyrighted images for your student work or projects. If you think you are going to publish your web page publicly, make sure to set the usage rights to "free to use, share or modify, even commercially" or you can also try to find a royalty free images or buy images.
• Click on Advanced Search button to start searching for images.

Below is what the search filter looks like:

4. Save all six images (3 dogs and 3 cats) inside the examples/assets folder. You may named them: dog1.jpg, dog2.jpg, dog3.jpg, cat1.jpg, cat2.jpg, and cat3.jpg.
5. All pictures should be roughly the same size. Modify the sizes in Photoshop or Paint if you need to. (See Optimized Image in Photoshop lecture).

Part 2: Add Content and javascript

Add structure and images into the page.

1. In Dreamweaver, create a new file called disj-rollover.html and save it in the examples folder.
2. Create a page title with the text "Dogs and Cats Living Together" (no quotes).
3. In the Code view, create three AP Divs and give them the IDs: topbox, leftbox, and rightbox.
   
4. The following couple steps, you will be creating ID selectors for the three divs and arrange the AP Divs on the page. The final layout will look like the figure shown below:
   
5. In the CSS Styles panel, create an ID selector called "#topbox" (no quotes) with the following properties: absolute positioning, width 400px, and height 300px.
6. In the Design view, you should see a box from the div that you created earlier. Click on it and drag it to the center of the page using the move handle (move handle is when you put your mouse over the box, it will turn into a cross arrow shape ). Figure below is what it looks like when you click on the div box to move it.
   
7. Redo step #4 and create an ID selector called "#leftbox" (no quotes) with the same properties as #topbox.
8. In the Design view, click on #leftbox div and arrange it underneath the #topbox div.
9. Again, redo step #4 and create an ID selector called "#rightbox" (no quotes) with the same properties.
10. In the Design view, click on #rightbox div and arrange it underneath the #topbox div. Align #leftbox and #rightbox next to each other and below the #topbox div, as shown in the figure on step #4.
11. Insert the dog images from the assets folder to the div boxes so that they go in the following order:
• #topbox -- dog1.jpg
• #leftbox -- dog2.jpg
• #rightbox -- dog3.jpg

Instructor Note:
Easiest way to insert the image is from the Code view. This way, it will prevent any mistake of inserting the image outside the box.
Click in between the div tags: <div id="topbox">cursor here</div>, find the first dog image from the assets folder, then click, drag, and drop it in between the div tags.

If you don't want to use your mouse to drag and drop the image, you can use the Insert --> Image menu, find the first dog image from the assets folder and click OK.

Don't forget to add the alternative tags for those images.

12. Click to select the first dog image and give it an ID. You can do it from the code view (i.e. <img id="dog1" /> ) or from the Properties panel. Repeat the step and give the other two dog images with IDs: "dog2" and "dog 3" (no quotes).
13. Now we're going to add the JavaScript. Activate the Behaviors panel (Window --> Behaviors) and click on "Behavior".
14. We want to apply the swap behavior only on dog1.jpg and not the other two images.
    1. Click to select the "dog1" image, and click on the + (plus sign) on the Behaviors panel to select Swap Image. Be careful not to select the div tag, but the image.
    2. In the Swap Image window, dog1 image should be selected. Click the Browse button to navigate to examples/assets folder and select cat1.jpg. Leave the checkboxes for both "Preload images" and "Restore images onMouseOut." DO NOT click on the OK button yet.
    3. Click to select dog2 image, and click the Browse button to select cat2.jpg from the assets folder. Leave the checkboxes for both "Preload images" and "Restore images onMouseOut."
    4. Click to select dog3 image, and click the Browse button to select cat3.jpg from the assets folder. Leave the checkboxes for both "Preload images" and "Restore images onMouseOut."
    5. Click the OK button to get out of the Swap Image window.
    

Instructor Note:
Preload Images means when the page is loading, it will also load the images on that page, including the swap image(s), so that there won't be any delay when your user hover the mouse over the image.

Restore images onMouseOut means the image after swap to another image when the mouse is over it, it will return to the original image when the mouse is not over it anymore. If you uncheck this option, the swap image will stay on the second image, unless you refresh the browser.

15. Save the file.

Activity:

• Go to Code view and see what you just did? What do you think of the Javascript? It's more complex in comparison to the Rollovers exercise.
• Preview the file in the browser. Do you see any problem with it?

Part 3: summary for doing rollover

Here are the steps you need to do to create rollover images:

1. Images need to be the same size.
2. Insert image into the page (alt tag).
3. ID the image (lowercase, no space).
4. Open Behavior panel from Window menu, inside Tag Inspector.
5. Click on the + sign
6. Choose Swap Image
7. Browse to select the new second image.
8. Usually leave the checkboxes for preload image and onMouseOut.

Part 4: Saving and Uploading

1. Save your disj-rollover.html Web page.
2. Upload examples folder to the SWS.

Instructor Note:
As you should be in the habit of doing, be sure to use a browser (or more than one browser) to check your Web pages on the SWS to ensure everything works properly.