Fading Image Rollovers

The process of creating what are know as "Remote" rollovers is the same as creating normall rollovers. The only difference is the image and the link are in two seperate places. A "Remote" rollover comes in 2 forms

1)Multiple Rollovers - Single Image Position
(This is where you mouse over a link and an image on the page changes to a different image depending on which link is being hovered.)

2)Single Rollover Multiple Image Position
(This is where you have a single rollover but the rollover is viewed in several positions

1)Multiple Rollovers - Single Image Position
This is the easiest to set up. All you need for this are multiple JSFX.Rollover definitions and one <img> where the rollovers are to display. You also need multiple links to activate the rollovers. In this example we will put the links below the image that will display the rollovers.

First we need to define the rollovers. You can use any name you want for the rollovers but it is best to use a theme. e.g.

JSFX.Rollover("screen1", "images/screen1.gif");
JSFX.Rollover("screen2", "images/screen2.gif");
JSFX.Rollover("screen3", "images/screen3.gif");
or
JSFX.Rollover("pic1", "images/pic1.gif");
JSFX.Rollover("pic2", "images/pic2.gif");
JSFX.Rollover("pic3", "images/pic3.gif");

This is not neccessary and the following is perfectly acceptable

JSFX.Rollover("holiday1", "images/airport.jpg");
JSFX.Rollover("holiday2", "images/hotel.jpg");
JSFX.Rollover("car", "images/rental.jpg");

The only thing to remember is:-
The images MUST all be the same size (height and width)
the first parameter "screen1" is the name given to the rollover and is used in the fadeIn/Out functions.
the second parameter "images/screen1.gif" links to the image to be displayed.

The rollover code goes in the <head> section of your document and if your remember from the Fading Rollovers help text you need to include the library file as well as defining the code. The head section will look something like this.

Next, we need to place an image in the body of the document that will display the rollover images. The image needs a foreground and a background for the fade to work. Again, we use a table to achieve this.

Here, the background image is "images/screen_off.gif". This is the image that will be displayed when the mouse is not over a link. This could either be a blank image or a default picture, it depends on the effect you are trying to achieve.

We next need to define links that will activate the rollover when the mouse is over them.

<a href="some_url.html"
onMouseOver="JSFX.fadeIn('tvScreen','screen1')"
onMouseOut="JSFX.fadeOut('tvScreen')">Picture1</a>

In this example we are fading in the rollover 'screen1' into the image in the document that is called 'tvScreen'. If we look at where the JSFX.Rollover is defined we can see that the rollover 'screen1' refers to the image 'images/screen1.gif' so that is the image that will be displayed when the link "Picture1" is moused over.

To restate this, lets use the 'holiday' example where we defined
JSFX.Rollover("car", "images/rental.jpg");
If the code for the table looked like this

Then the link would look like this

<a href="some_url.html"
onMouseOver="JSFX.fadeIn('theImage','car')"
onMouseOut="JSFX.fadeOut('theImage')">Picture1</a>

Here we are fading in the rollover 'car' into the image in the document that is called 'theImage'. If we look at where the JSFX.Rollover is defined we can see that the rollover 'car' refers to the image 'images/rental.jpg' so that is the image that will be displayed when the link "Picture1" is moused over.

Getting back to our original example we need to define 3 links for 3 screens. Here is what all 3 links would look like

<a href="some_url.html"
    onMouseOver="JSFX.fadeIn('tvScreen','screen1')"
    onMouseOut="JSFX.fadeOut('tvScreen')">Picture1</a>

<a href="some_url.html"
    onMouseOver="JSFX.fadeIn('tvScreen','screen2')"
    onMouseOut="JSFX.fadeOut('tvScreen')">Picture2</a>

<a href="some_url.html"
    onMouseOver="JSFX.fadeIn('tvScreen','screen3')"
    onMouseOut="JSFX.fadeOut('tvScreen')">Picture3</a>

Notice that the only thing changing is the name of the rollover ('screen1', 'screen2', 'screen3') and the text of the link (Picture1, Picture2, Picture3). putting it all together would give us something like this.

</body>
</html>

Which results in a page that looks like this.

2)Single Rollover Multiple Image Position
Now lets look at a single rollover in multiple positions. This shares the same characteristic in that the link to activate the rollover is seperate from the image that will display the rollover. Lets look at the example where an LED will light up next to the link that is hovered. For simplicity in this example we are not going to use a background image so the image will fade from 'blank' to 'on'. First lets define the rollover

JSFX.Rollover('ledRoll', 'images/red_on.gif');

Here we have created a rollover called 'ledRoll' that is related to the image 'images/red_on.gif'.

Next, we need to define some images that can be used to display the rollover :-
<img name="led1"
     src="images/blank.gif" width="16" height="16" class="imgFader"><br>

<img name="led2"
     src="images/blank.gif" width="16" height="16" class="imgFader"><br>

<img name="led3"
     src="images/blank.gif" width="16" height="16" class="imgFader"><br>

Here, the images are initially set to 'images/blank.gif' (which is a transparent 'blank' gif) and the images are named 'led1', 'led2', 'led3'. We now need to define 3 links to turn the images on & off. These look like this

Notice how similar this is to the code for the tvScreen example. The only difference here is the first parameter (the image name) is the parameter that is changing ('led1', 'led2', led3') Putting it all together you might think it looks like this :-

<html>
<head>
<title>Test(/title>

<SCRIPT TYPE="text/javascript" SRC="javascript/JSFX_FadingRollovers.js">
</SCRIPT>
<SCRIPT TYPE="text/javascript">

</SCRIPT>
</head>

<body>

</body>
</html>

However, this would result in a page that looked like this.

It does not matter where the link is in the document, all that matters is the onMouseOver and onMouseOut code refer to valid a JSFX.Rollover and <img>. Rearranging the HTML gives the more desired result

<html>
<head>
<title>Test(/title>

<SCRIPT TYPE="text/javascript" SRC="javascript/JSFX_FadingRollovers.js">
</SCRIPT>

<body>

</body>
</html>

This places the link next to each image resulting in a page that looks like this.