Mouseover and click

To make your image swapping function even nicer, you can add an onClick event. When the user clicks on the image, another image is loaded. This image typically looks like a pressed button, to give the user the feeling that he's in fact clicked the button.

Try the buttons below (graphics aren't my strongest point, so it won't look like a pressed button). The links lead nowhere, it's just meant to show the effect.

How to do this? First, you need the mouseover script I've explained earlier. Then you'll need to change it somewhat.

Changing the script

Define some extra variables at the top of the script:

var ocl = new Array();
var select = -1;
var name2 = "";
var temp = 0;

Add the following lines to the for-loop:

ocl[i] = new Image;
ocl[i].src = base + stuff[i] + "_clic.gif";

Add a function:

function clic(no)
{
	if (document.images)
	{
		document.images[stuff[no]].src = ocl[no].src
		temp = select;
		select = no;
		if (temp != -1) {out(temp)}
	}
}

In the existing functions for mouseOver and Out, change:

if (document.images)

to:

if (document.images && select != no)

Explanation

First, we define a new array for the onClick images and pre-load them.

var ocl = new Array();

ocl[i] = new Image;
ocl[i].src = base + stuff[i] + "_clic.gif";

At first sight, this and a new function clic() seem to be enough. But it isn't. You also want the onClick image to remain in place regardless of onMouseOvers and Outs.

So we'll need a new variable that keeps track of what image is currently clicked. This is

var select = -1;

This variable is set whenever an image is clicked. So, the mouseOver and Out function are changed to:

if (document.images && select != no)

If the Images Object is supported and the image mouseovered is not the image currently clicked, the normal mouseover/out actions take place.

Even that's not enough. We also want the clicked image to return to normal as soon as another image is clicked. All this is done in the clic-function.

First, the standard images object check and image swap.

function clic(no)
{
	if (document.images)
	{
		document.images[stuff[no]].src = ocl[no].src

Now, we'll need to do the following: change the old clicked image back to normal, load the new clicked image in select.

Of course, for changing the old image back we use the function out(), which is expressly written for this purpose.

But if we tell out() to change the image in select, it refuses to do so because a while back we told it not to. So we'll need to temporarily load select into another variable temp. Then we'll need to change select to the new clicked image.

temp = select;
select = no;

Now, select is the new image and the old one is stored in temp. Now we can tell out() to change. The only thing we'll still have to do is see whether temp is -1 (ie.: whether this is the first time an image is clicked). If so, we don't want to execute out(), because image -1 doesn't exist and changing it nonetheless would lead to JavaScript Error Message Alerts.

		if (temp != -1) {out(temp)}
	}
}

Finished! You now have added onClick functionality in your pages!