Simple Rollover

Let's begin with a very simple rollover. We swap two images when the mouse pointer comes into the link area and swap them back when the pointer leaves the link area.

A simple rollover

The function roll() deals with the image swap:

52: function roll(img,nb) {
53:    eval("img.src=a["+nb+"].src");
54: }

[...]

77: <A HREF="#"
78:    onmouseover="roll(img1,0)";
79:    onmouseout="roll(img1,1)">
80:    <IMG name="img1" SRC="img1.gif"  BORDER=0 >A simple rollover
81: </A><br><br>

The function rool() (lines 52 to 54) handles the simple process of image swaps. The name passed to the function (img) identifies the image that will be replaced by one of the two images that we previously stored in the array. The index of the requested image is also passed as an argument nb. In our example, nb can only have one of two values: 1 or 0.

Now we merely have to synchronise this swap with the event that occurs when the link is flown over. This is defined when creating the link (lines 77 to 81).

We called up the function roll() with the appropriate arguments when the onmouseover and onmouseout events occurred. The first argument is the name identifying the image (the name attribute defined in line 80), and the second argument corresponds to the index of the image to be displayed.