Show/Hide Div + change image=HELP

[Webill]

Hi There I have written a script that should do the following:

1- Click on add.png that changes in the minus.png , opens a hidden DIV with text and changes a photo all at the same time.
2- When then the delete.png is clicked everything has to go back to the original situation.

What does not work:
1- the add.png does not change into delete.png
2- the photo does not reset to the original one when the div is closed.

Here is my code:

Code: Select all

<script language="Javascript 1.2" type="text/javascript">
function show(id)

{
    el = document.getElementById(id);
    if (el.style.display == 'none')
    {
        el.style.display = '';
        el = document.getElementById('more' + id);
        el.innerHTML.thisImage = 'images/add.png';
    } else {
        el.style.display = 'none';
        el = document.getElementById('more' + id);
        el.innerHTML.thisImage = 'images/delete.png';
    }
}

function change_pic(val) {
    document.getElementById('image_name').src = val;

}

</script>

Here is the HTML

HTML: Select all

 <div class="foto">
<img name="image_name" id="image_name" src="../images/AllCd.jpg"  border="0" alt="i">
</div>


<p><strong> Olthuis</strong>
<a id="moreinfo" href="# " onclick="javascript:show('info'), change_pic('../images/Olthuis.jpg'); return false;">
<img src="add.png" ></a></p>
<div id="info" style="display: none">
BLABLABLA text
</div>
<p><strong>Teddy </strong> - 
<a id="moreinfo2" href="#" onclick="javascript:show('info2'), change_pic('../images/teddy.jpg'); return false;">
<img src=".add.png" ></a></p>
<div id="info2" style="display: none">
BLABLABLA text
</div>
<p><strong>Hermr</strong>
<a id="moreinfo3" href="#" onclick="javascript:show('info3'), change_pic('../images/ermine.jpg'); return false;">
<img src="add.png" ></a></p>
<div id="info3" style="display: none">
BLABLABLA text
</div></div></div>

THANK YOU!

[CloudedVision]

Little mysterious script here

Code: Select all

el.innerHTML.thisImage = 'images/add.png';

innerHTML will return the HTML contents of an element (a string), so adding .thisImage to a string will return nothing. You want something like this:

Code: Select all

document.getElementById('image_id').src = 'mysrc.gif';

[Webill]

Thank you. Indeed my code is not right.

What I actually want is that when I click on an icon the related div opens up (with text) and a photo changes in another place in the page.
When I close the div the text hides & the photo resets to its original.
I have a total of 4 divs and 5 photos (the original photo + the 4 related to the divs).

Hope this is clearer and that ou can help.
Chears

[CloudedVision]

just use do something along the lines of this:

Code: Select all

el.innerHTML = '<p>Text!</p><img src="bla.gif" alt="Image!" />';

Hope that helps