JavaScript

random image | rollovers | plugins

Navigational Devices

Rollovers are the kind of menu seen on many web sites, where the colour of the choice changes as the mouse runs over it. The same set of rollovers is included on each page, so that the user retains a sense of consistency - they know where they are and where they are able to go at any time.

On the left is an example of a set of rollovers. The mechanics are like this: although it looks like a single image, there are in fact twelve different ones - one for each menu item, plus an image at the top and an image at the bottom. These last two are static images. The rest have onMouseOver events, which means that some JavaScript kicks in whenever the user places the mouse over them.

What the script does is to swap the image with blue text for one with red text. As the user takes the mouse away from each image an onMouseOut event is invoked, which reverses the process - swapping the red text for the original blue. Each of the active images is also an HTML link to the relevant page. The current page is always left in red.

It would be problematic if the user's browser had to refer to the web site each time it needed to load one of these dynamic images - so an extra function is use to download all the images in one go, whether visible or not, as soon as the page is opened.
In this particular case there is a distinct advantage to the way the rollovers are implemented: as was the case in the previous example, the scripts are called from a separate JavaScript file. This means that in order to change the menu system in all ten pages of the site, only one text file needs to adjusted.

This example will show you how to make one rollover. Feel free to copy the scripts which are behind the rollovers above from the file cvaventure.js. These are more detailed than what follows.

The first function is the one which preloads all the dynamic images. Here is the code for one pair of images:
if (document.images) {
 var home_on = new Image();
 home_on.src = "home_on.jpg";
 var home_off = new Image();
 home_off.src = "home_off.jpg";
}
If the effect is to work correctly, each pair of images must be identical except for the colour of the text. To achieve this it is imperative to use a powerful image editor such as The Gimp, Photoshop or Paintshop Pro.

The next step is to prepare functions which will perform the actions needed during onMouseOver and onMouseOut events. These two functions take a string, such as 'home', and add the ending '_on.src' or '_off.src' as necessary, to load either the first or the second of the two images preloaded above.
function imageOn(imagex) {
 if (document.images) {
  ion = eval(imagex + "_on.src");
  document[imagex].src = ion;
 }
}

function imageOff(imagex) {
 if (document.images) {
  iof = eval(imagex+"_off.src");
  document[imagex].src = iof;
 }
}
The onMouseOver and onMouseOut events are calls to the above two functions. In order to ensure that the present page always remains red, this function accepts the name of the present page and checks for it, before writing out the relevant HTML.

function Navigation(present); {
 if (present=='home')
  {document.write('<img src="home_on.jpg" width="156"
    height="18" border="0">');}
 else
  {document.write('<a href="sommaire.html"
    onMouseOver="imageOn(\'home\');"
    onMouseOut="imageOff(\'home\');">
   <img name="home" src="home_off.jpg" width="156"
     height="18" border="0"></a>');}
}
Finally, the script which needs to be included in each page is as simple as follows:
<script>Navigation('home');</script>