OnClick Image Swap 1

[nevets2001uk]

I'm using JavaScript for the first time to create a DHTML website. I'm trying to create a small bit of code to swap between two images on the click of a button. The code I'm using is below...

onclick="document.all.imagename.src =document.all.imagename.src=='closebutton.gif' ? '' : 'maxbutton.gif'"

It's adapted from some code I've got working to hide and show a section of the page. It works the first time to change the image on the first mouseclick but doesn't revert back to the original image on the next click.

Just wondering if anyone could tell me what I'm doing wrong?

Thanks

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[vongrunt]

onclick="document.all.imagename.src =document.all.imagename.src=='closebutton.gif' ? 'maxbutton.gif': 'closebutton.gif'";

 

[nevets2001uk]

Looks like I was close!

Thanks. I think I see what the code should be doing but it still doesn't seem to work fully. My image's source is initially closebutton.gif. When the image is clicked it changes to nextarrow.gif but for some reason it won't go back to closebutton.gif when I click it again. Still seems to have the same problem as before.

I've tried changing the which image src i'm using in each of the three parts of the code but it doesn't seem to make a difference. Does your code snippet assume that closebutton.gif will be the original src before the mouseclick?

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[vongrunt]

Ack... browser normalizes src to full path. Try this:<p>

<img src="original_image.gif"  onclick="swapImage(this, 'original_image.gif', 'swap_image.gif');">
...
<script language="javascript">
function swapImage( oImg, sSrc1, sSrc2 )
{	sOldSrc = oImg.src;
	oImg.src = sOldSrc.lastIndexOf( "/" + sSrc1) == sOldSrc.length-sSrc1.length-1? sSrc2: sSrc1;
}
</script>

 

[nevets2001uk]

Thanks but I'm afraid to say it's still not working for me. Have implemented what you suggested but I get the error...

'sOldSrc' is null or not an object



Steve Gordon

http://www.celebrity-hunt.co.uk

 

[vongrunt]

I tried it again - in IE and bugzilla - no errors.

This error indicates that onclick doesn't apply to IMG tag, so problem is probably somewhere else - not enclosed HTML tags, missed quote and so on. Can you post relevant code for debug?

 

[nevets2001uk]

I'll look it over again first. Probably me missing something obvious. The main reason it's a little tricky is because I'm creating some of the code dynamically using asp.net. I'll look more closely through the code that is generated after the page is displayed.

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[nevets2001uk]

It's working now. Missed a ' mark on one of the lines that I hadn't noticed!

Thanks for your help with this.

PS - One thing I'd just like to ask for future reference. Is it possible to have it so clicking on one image would change another? Can I just replace 'this' with the id of the other image? Or would it be more complex?

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[vongrunt]

Just replace 'this' with document.getElementById('id_of_the_other_image').

 

[nevets2001uk]

Brilliant. Thanks for all your help!

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[nevets2001uk]

Just a quick additional question relating to this code that I've come up with. Is there a simple way of avoiding a refresh / postback changing the image back to the original?

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[vongrunt]

Refresh? I don't understand precisely; please explain.

 

[nevets2001uk]

When the page is refreshed (reloaded in the browser)it reverts back to the original image sources. This is part of an ASP.NET application that sometime refreshes the browser.

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[vongrunt]

You'll need to store last image state into cookies or server-side Session, then generate src for original and swapped images on-the-fly depending on stored values.

 

[nevets2001uk]

Yeah thought I might. Thanks.

Steve Gordon

http://www.celebrity-hunt.co.uk