Javascript onClick Image Change

[andrewtayloruk]

Hi, i don't know if this is the correct place for this but here goes.

I have an image inside an <a> tag and need it to change when clicked. Most of the examples i've seen will change once clicked but don't change back to the original image when clicked again.

I don't suppose any of you Javascript guru's could knock something up that will do this?

Any help would be appreciated.

Thanks,
Andrew

[brad]

i don't know JS well enough to ramble something off the top of my head, but it seems pretty straight forward if you have code to change it when clicked. just keep track with a variable (if it's only 2 images, it could even be a boolean) and hack the code to change the desired image based on what the current value of the variable is.

something like

image = ((image == 1)?0:1);

then display 'image'+image to show either image1 or image0

there may be a more eloquent way to do it, but that's usually how i do these sorts of things.

[atlan]

Not much Javascript here either.

do an onmouseout= ??????

function mouseOut()
{
document.b1.src ="imagename.jpg .gif whatever";
}

and add this within your <a> tag

onmouseout="mouseOut()">

[slapshotw]

In the header, try:

var img1 = image1.jpg;
var img2 = image2.jpg;
var imageChoice = 1;

function imageChange(element) {

if (imageChoice == 1) {
element.src == img2;
imageChoice = 2;
}
else if (imageChoice == 2) {
element.src == img1;
imageChoice = 1;
}

And for the image, use:

<img src="image1.jpg" onclick="imageChange(this);">

[brad]

combined with my code, it'd be a bit cleaner. at the least, that shouldn't an else if as it'll make the second if be evaluated which is unnecessary. else should be enough alone.

[slapshotw]

Originally Posted by brad

that shouldn't an else if as it'll make the second if be evaluated which is unnecessary

I like to do it because it makes it easier for me to follow with my own code, and if it doesn't work, it could mean something else is wrong.