Assignment in Brief

• Choose the other client from the one used last week and create remote rollovers images for the navigation at that site.
• Slice the file and then create sliced images and HTML code for the home page and second level file.
• Submit the Rollover Surf Form

Reading
Read the Rollover section of the CD
Read this Lesson 4 page all the way through
Chapter 11, Exercise 7 in the Lynda Weinman book covers Remote Rollovers

Learning Objectives

Remote Rollovers
Remote rollovers cause the image your mouse is over to change AND cause an image somewhere else on the page to change as well. Because an image changes somewhere else on the page the term "remote" is used.

Let's start with a common remote rollover effect. I place my mouse over a link, the link changes color and a cell below the link, explains what information will be found at this part of the site.

All that is involved is to create a slice below the navigation and then add another layer with the explanatory text. This slice will be accessed and the text turned on when the rollover state of "Over" is created for the link. 4 images are involved in this remote rollover

the link in normal state

calendar.gif

explanatory text area in normal state (notice it is just solid color)

submenu.gif

link in rollover state

calendar-over.gif

explanatory text in rollover state

submenu-calendar.gif

Take a look at the Web SIG page and try all the links.

To accomplish this effect I created a separate cell below the navigation, I named this cell "sub-menu" I created 5 layers of text, one layer for each of the 5 navigational links. When I created the rollover state, I turned on the red link text and also turned on the layer of text that stated "upcoming events & archives of past events." ImageReady created Javascript code for 2 image swaps, the calendar.gif and the submenu.gif.

top

Remote Persistent Rollovers
What if I have a main menu and want a sub-menu which contains linked areas to appear? When I access this remote menu the sub-navigation would remain down and I can click on an individual item and be taken to a unique location.

In the remote rollover example above, another area of the screen changes, but if I tried to click on that area it would disappear. The explanatory text only displays when the mouse is over the calendar link.

Let's use the example of a main menu item of "Content Developer" and 4 sub-menu items of "HTML", "Dreamweaver", "FrontPage", and "GoLive".

See the page in action

Step by step instructions
Select the content developers cell in normal state (all red dots and sub-menu items are turned off )

For the rollover state make the following changes:

1. turn on red content developer text
2. turn on red dots
3. turn on HTML
4. turn on Dreamweaver
5. turn on FrontPage
6. turn on GoLive

Select normal state

Select the HTML cell, in normal state the cell is blank white, content developer text is purple

For the rollover state make the following changes:

1. turn on red content developer text
2. turn on red dots
3. turn on RED HTML
4. turn on Dreamweaver
5. turn on FrontPage
6. turn on GoLive

Select normal state

Select the Dreamweaver cell, in normal state the cell is blank white, content developer text is purple

For the rollover state make the following changes:

1. turn on red content developer text
2. turn on red dots
3. turn on HTML
4. turn on RED Dreamweaver
5. turn on FrontPage
6. turn on GoLive

top

Turning in Homework

Create the remote rollover effect and then slice up the file and create a Web page which displays all the images. I recommend you create a new folder called either "campus-final" or "optional-final" and save the html file and the sliced images in this directory. Add this code to your homework page.

<A HREF="optional-final/index.html"> view my optional client's remote rollovers </a >