|
Show/HIde + change image >>need help!
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:
<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
<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!
|