Remote Rollover

A remote rollover causes an area of the screen which is away from the mouse to change in appearance. I will use the photo navigation of fish to demonstrate this principle

The original navigational system showed several fish photos and text which were all duotoned in blue. I want my rollover effect to be that the blue duotoned fish, becomes a full color image, and a sub navigation system appears on the screen.

Here is what my image looked like when I began.

I had placed an adjustment layer over the 5 photos and background layer to create the duotoned look.

If I make copies of the 5 photos and place them above the adjustment layer I will be able to display each image in full color, during my rollover effect. I now have 2 copies of each photo, one above the adjustment layer which will display in full color, another below the adjustment layer which displays in duotone.

Now I need to decide where these remote rollovers will occur. I map out the following areas. The catalog and about us links will roll into the area at the lower left, joke book and order online go in the upper right and about us in the lower right.

The next step is to type in the text which will display in the remote area. I type in 4 sub-catagories which will display when "online catalog" is rolled over. As I do this I notice that the bubbles in this area make it difficult to read the words. When I turn off the bubble layer all the bubbles disappear. Sometimes when you create the original navigation you do not do it in a way that works when you are ready to add the rollover effects. I decide to create 3 layers which are rectangles which cover up the areas where the rollover text appears. Here are the 3 layers:

When the rollover for online catalog appears, the fish photo will appear in full color, the stroke around the photo will change, and the sub navigation for that section will appear.

I type in the sub navigation for each section, and then determine where the slices should go. I drag down guides to help me see the layout. When creating slices, turn all your sub navigation text on so you can see the edges of the text.

As I view the guides I see that some of the images need to be moved for a more efficient slicing pattern. As I move the fully covered images, I also need to make sure I move the photo which appears as a duotone, and the text which labels the image. Linking the layers together insures that all layers move at the same time. I adjusted the seahorse down and to the right and moved the huma up. I also added another guide to help create a slice for the moon coral.

Make sure you turn off all your rollover layers before you begin. For me that involved the color photos, sub navigation text and blue patches. I am now ready to save the file and switch to ImageReady.

I access the Slice menu > Create Slices from Guides. Here are the slices that are created.

I select several slices and combine them to create a pattern of slices which serves my needs.

I select the catalog slice, access the slice menu on the rollover window, and label each slice with a name, URL (if applicable) and alt text.

Then I access the rollover window and select the "catalog slice". Here is how the screen will look at this stage.

I

To achieve a remote rollover Iadd a new layer for the rollover state (by clicking on the new page icon at the bottom of the screen) and then turn on the color photo, lower left patch, and sub-navigation text. This process is very similar to the simple rollover we created in the campus site, however in this case I turn on 3 new layers instead of one. A new state appears on the screen when the Over state is selected. Remember before moving on to the next slice, you must select the original "catalog" layer.

I repeat this step for the remaining 4 slices which have rollover effects. I save the file as "fish-photos.psd" and then access File > Save Optimized as. The file is saved as fish-photo.html, and the sliced images are placed in an images folder. Here is the finished effect.

The images used to create 2 of the rollover effects are shown below, each image follows a similar pattern. Note that in a remote rollover more than one image is changed during the rollover effect. In this case the image of the fish changes, and a blue bubble are changing to an area with text.

catalog button

---

about button




Refer to the CD to review the Photoshop document I used to create these buttons.
CD > CIS 58.53B Advanced Class > PSD Files > rollovers >fish-photos.psd