Javascript changing images problem

I want to change the image when clicked, and then change back when clicked again.

it changes the first time, but then doesnt change back

function:
function changeplus(theid){
var theid=document.getElementById(theid);
theid.src=(theid.src=='Images/moredetailminus.gif')? 'Images/moredetailplus.gif' : 'Images/moredetailminus.gif';
}


body:

<span onClick="updatenewsdisplay(<?=$row2['id']?>);
changeplus('<?=$row2['id']?>plus');"
style="cursor:help; color: #006699;">
<img id="<?=$row2['id']?>plus" src="Images/moredetailplus.gif"></span>


any ideas why it isnt working?

Thankyou!!!

When you read the src of the image, it returns the absolute path even if you set it to a relative path. So you need to change the condition to:

theid.src=(theid.src.indexOf('minus.gif')!=-1)? 'Images/moredetailplus.gif' : 'Images/moredetailminus.gif';

thankyou,!! you are awesome!

can you explain to me what indexOf means and why the -1 in there?

thanks,
Daniel.

http://www.devguru.com/Technologies/ecmascript/quickref/string_indexof.html