Point and Change!

We need two functions: one to display the relevant layer when the mouse pointer is placed over a chosen element (here a link or the image), and another to hide it when the pointer is moved out of the element's area. The two functions will be called up respectively through the onMouseOver and onMouseOut events of the triggering elements:

Add these functions to the already existing <SCRIPT> section (right before the </SCRIPT> ending tag:

function afficheCalque(calque)
{
  eval(layerRef + '["' + calque +'"]' + styleRef +
                  '.visibility = "visible"');
}

function cacheCalque(calque)
{
  eval(layerRef + '["' + calque +'"]' + styleRef +
                  '.visibility = "hidden"');
}

Now we just need to have them called up when the events occur on our triggering links (that we have to create at the same time). To do this, replace:

        Invention | Celebrity | Tragedies

with the following lines:

<a href="#" onmouseover="afficheCalque('Calque1');"
onmouseout="cacheCalque('Calque1');">Invention</A> |
<a href="#" onmouseover="afficheCalque('Calque2');"
onmouseout="cacheCalque('Calque2');">Celebrity</A> |
<a href="#" onmouseover="afficheCalque('Calque3');"
onmouseout="cacheCalque('Calque3');">Tragedies</A>

The image could also trigger our rollover text. Modify the following instruction:

<IMG SRC="logo.gif" WIDTH=300 HEIGHT=304>

in this way:

<IMG SRC="logo.gif" WIDTH=300 HEIGHT=304
onmouseover="afficheCalque('Calque1');"
onmouseout="cacheCalque('Calque1');">

That's it! You have done it!