...

View Full Version : Help with ImageSwap/Switch



tyfeatherston
12-24-2007, 07:56 AM
Hi I have this code to collapse and expand a <div>.


<a href="javascript:collapse1.slidedown()" onClick="switchImage ('images/expand.png','images/collapse.png','pass_image'); javascript:collapse1.slideup();"><img src="images/expand.png" id = "pass_image" name="pass_image" border="0"/>Slide Down</a>
<div id="test" style="width: 300px; background-color: #2e2e2e;">




This is the javascript file.

function switchImage (image_1,image_2,image_id)
{
if (document[image_id].src == image_2)
{
document[image_id].src = image_1;
}
else
{
document[image_id].src = image_2;
}
}

What is does it is when it is clicked to expand it shows the collapse pic and when it is click again to collapse it shows the expand. But the problem is when i click for it to expand it shows the collapse icon like it should but when I click it again it does not move back to the original expand icon?

Any help would be great. I think it is something simple i am missing.

Thanks,
Tyler

shyam
12-24-2007, 10:19 AM
the src attribute returns the complete url of the image src so when comparing 'http://www.example.com/images/collapse.png' == 'images/collapse.png' always fails

instead try using

function switchImage (image_1,image_2,image_id) {
if (document[image_id].src.indexOf(image_2) != -1 ) {
document[image_id].src = image_1;
} else {
document[image_id].src = image_2;
}
}

tyfeatherston
12-24-2007, 05:04 PM
Thanks, That worked perfectly!!! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum