On click change image

[Craig321]

Hi,

I have some javascript that when a link is clicked (whatever link you tell to use the java) it'll hide the stuff in a certain div tag (only if the div tag has the correct class).

What I'm looking to do is have an image that would be clicked to hide the content & clicked again to bring back the content. But when the content is hidden I want the image to change, at the moment it's just the same image no matter what unless you apply a rollover which has nothing to do with the java.

Here's the java:

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"none";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"none";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"none";
}
}

Then to work it I've done this, which works fine.

<script type="text/javascript" src="js/dropdown.js"></script>

<div><a href="javascript:toggleLayer('drop');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_title','','images/nav_title_rollover.gif',1)"><img src="images/nav_title.gif" alt="NavigationTitle" name="nav_title" width="185" height="25" border="0"></a></div>
<div class="nav_links" id="drop">
	Link 1<br>
	Link 2<br>
	Link 3<br>
	Link 4<br>
	Link 5
</div>

Basically, when the image is clicked I want it to change and stay changed until the user clicks it again to bring back the content.

Any ideas please?

Thanks
Craig.

 

[MastermindUK]

This might help:

<img id="twistimage" src="images/arrright.gif" alt="arrright" onclick="toggle('showdiv', 'twistimage');" />
<div id="showdiv">
Foobar
</div>
<script type="text/javascript">
function toggle(div,image)
    {
        var divStyle=document.getElementById(div).style;
        var image=document.getElementById(image);
        
        if (divStyle.display=="none") 
            {
                divStyle.display="block";
                image.src="images/arrdown.gif";
                image.alt="Down Arrow";
            }
        else
            {
                divStyle.display="none";
                image.src="images/arrright.gif";
                image.alt="Right Arrow";
            } 
    }
</script>

 

[Craig321]

Perfect, thanks very much m8.

Edit:
I'm also trying to use a rollover on the image, but the dreamweaver rollover code is incompatable

When you use the dreamweaver rollover code with that code it all goes wrong :

First time rollover is fine, but then onmouseout is restores the image, so if you have clicked it, then put your mouse out of the image area the image will restore to the original image which is not right. Then also if you're on the image that shows when the content is hidden and mouseover on it it will mouseover with the wrong image.

Any idea what I can do to fix please?

Craig.