Persistent Remote Rollover

In the previous example we created a rollover which caused an area of the screen which is away from the mouse, to change in appearance. that was pretty cool, however when I tried to click on the sub-navigation which displayed in a remote area, it would disappear. the sub-navigation only displayed when the mouse was over the photo. a persistent remote rollover allows the sub-navigation to remain on the screen, and visitors can click on a sub-navigational item and be taken directly to that page. I opened the "fish-photos.psd" file and saved it under a new name "persistent-remote.psd".

I need anew strategy if I plan on making persistent rollovers. The "fish catalog" and "about us" slices each used the same area to display sub navigation. If the sub-navigation is going to remain on the screen and take visitors to specific Web pages, I need to place each sub-navigational slice in a unique area of the screen.



The is also a conflict in the upper right slice which displays the "order online" and "joke book" sections. To solve the problem I would either need to identify 2 new areas to place rollover sub-navigation, or eliminate sub-navigation on 2 sections. I decide to eliminate sun-navigation from "about us" and "contact info". I will display the "order online" sub-navigation in the lower right section.

Now that I have a plan for where to put things, I need to add some additional slices which will hold each individual sub-navigational item. In this case I believe I can keep many of the existing slices, and simply re-slice the lower left, upper right, and lower right slices which will now hold sub-navigation which is clickable. Here are the slices which need to be redone.



I display the sub-navigational text for the "fish catalog" and the blue patch that blocks out the bubbles. I need to create slices for each line of text. I find it easier to zoom in as I place my guides.



after the guides are in place I use the slice selection tool to create new slices. Make sure ImagReady is set to "snap to guides". View > Snap > Guides.



Now I use the slice tool to re-slice the lower left slice into 5 slices. Don't worry if the numbers of the new slices are not consecutive. I like to click on each slice with the slice selection tool, to make sure they have been done correctly.



You will need to rename all these slices, and identify a unique URL and alt text for each slice. The slices which display the photos can retain their original names. I name the new slices "catalog-1", "catalog-2", "catalog-3", "catalog-4".



After naming the new slices, I need to create the persistent rollover effect. I start by turning off the layer for the lower left patch, and the sub-navigational text. Now the screen looks like it should when the page first loads.

The catalog slice which contains the round fish photo does not need to be changed. The name and shape of this slice have remained the same, and the rollover effect is also unchanged.

Next I select the "catalog-1" slice. The thumbnail of this slice is just a narrow blue rectangle. In it's normal state, this slice is just solid blue. To create the persistent rollover effect, select the new rollover icon and turn on these layers:

Make sure you click on the normal state for the slice before continuing on.

Next select the "catalog-2" slice, add a rollover state. Again turn on these layers:

Repeat these steps for the slices "catalog-3" and "catalog-4".

The final slice in this area does not need to be linked, or have a rollover effect. It should however be named. I named it "catalog-extra".

I sliced up the upper right area to allow for the sub-navigation for the joke book section. I followed the steps listed above to create the persistent rollover effect for the 4 new slices needed to create the sub-navigation for the joke book.

The rollover for the "order online" section is a little trickier. The original rollover was set to place the sub-navigation in the upper right slice, but I now want the text to display in the LOWER right. Whenever you change a rollover effects, do not try and modify the existing rollover for any of the affected slices. Instead throw the rollover state away and start over. I select the order online slice and throw away the existing rollover state. create anew rollover state and turn these layers on:

Now I need to slice up the lower right section of the screen. I turn on the sub-navigational text and create 5 slices in this area. I name the slices "order-1", "order-2", "order-3", "order-4", and order-extra. Again I assign URLs and alt text to the first 4 slices.

Now I assign rollover states to 4 of the order slices. Each time I turn on these layers:

Finally I need to access the about photo slice and the contact order slice. Each of these slices used to have remote rollover effect. I need to remove the rollover icon so those rollover images will not be created.

I Save the file as a PSD file and then select File > Save Optimized As and create a new directory to store the HTML and sliced images.

Visit this web page to see the finished product.

In the original remote rollover demonstration there were 18 images generated to create the remote rollover effect.

5 duotoned photo slices
5 full color photo slices
5 sub-navigation slices
3 original blocks of color where the sub-navigation displayed
1 plain blue slice
1 spacer.gif to keep all the slices in place

In the remote rollover example 42 images were generated.

5 duotoned photo slices
5 full color photo slices
5 catalog sentences slices
5 catalog plain blue slices
5 order sentences slices
5 order plain blue slices
5 joke sentences slices
5 joke plain blue slices
1 plain blue slice
1 spacer.gif to keep all the slices in place

If I had chosen to make another copy of each sentence for the sub-navigation, so that when you rolled over the sentence it changed color, I would have added 12 more slices for a total of 54. The purpose of all these numbers is to alert you to the fact that the code and the images become much more complex when remote persistent rollovers are used.

Refer to the CD to review the PhotoShop document I used to create these buttons.
CD > CIS 58.53B Advanced Class > PSD Files > rollovers > persistent-remote.psd

home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates