JavaScript Forum

**FOOOD** · 08-17-2006, 07:05 AM

I'm using the scriptaculous Toggle Slide effect, & use an image link (button) to toggle the box to slide down & up.

What I'd like to do it toggle the image link so when it's clicked it's replaced by a different image. Once it's clicked again it switches back to the original image.

Here is the code I'm using:

Code:

<a href="javascript:;" onclick="Effect.toggle('up-down','slide'); return false;"><img src="images/first-image.jpg" alt="toggle" /></a>

<div id="up-down" style="display: none;">
<p>'Content'</p>
</div>

And the other image I like to toggle between is:

"images/second-image.jpg"

Anyone know how I can do this?

**FOOOD** · 08-18-2006, 01:26 AM

Never mind, I managed to find out how to do this

**kIDJOE** · 08-25-2006, 08:11 PM

send me a URL im loving RoR

**Newrone** · 02-11-2007, 06:54 PM

Quote:

Originally Posted by FOOOD

Never mind, I managed to find out how to do this

Aaaarrrghh! - I zapped on here because your problem is EXACTLY what I'm trying to do. WITH Scriptaculous too!!!

So what did you find out????
Pleeease

**jito** · 02-13-2007, 02:43 AM

Newrone this is for you:

HTML Code:

<html>
<head>
<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
    document.getElementById("showthis").style.display = 'none';
 }else{
   document.getElementById("hidethis").style.display = 'none';
    document.getElementById("showthis").style.display = '';
 }
}
</script>
</head>
<body>
<span onClick="toggle();"><IMG SRC="../img1.gif" WIDTH="259" HEIGHT="32" BORDER="0" ALT=""  name="hidethis">
 <IMG SRC="../img2.gif" WIDTH="259" HEIGHT="32" BORDER="0" ALT="" style="display:none" name="showthis">
</span><br /><br />

</body>
</html>