View Single Post

Webill · #1 (**permalink**) May 5th, 2008, 15:36

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!