Hide/show div + change image

[webill]

Hi there - I have a problem with joining 2 functions and using your existing ones does not work:
1 has to show more text in a DIV on the right
2 at the same time the image has to change on the left.

So far I have it, I need >>>>> help in order to reset the image to its original one when the DIV is closed. <<<<<<<<

Here is my code. I hope you can help me, therefore my thanks!

Javascript:
function show(id)

{
el = document.getElementById(id);
if (el.style.display == 'none')
{
el.style.display = '';
el = document.getElementById('more' + id);
el.innerHTML = 'dicht';
} else {
el.style.display = 'none';
el = document.getElementById('more' + id);
el.innerHTML = 'meer...';
}
}

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

HTML:

<div class="foto">
<img name="image_name" id="image_name" src="../images/AllCd.jpg" border="0" alt=" musici">
</div>
<!-- END FOTO -->
<!-- TEXT -->
<div class="musici">
<h1>Musici</h1>
<p><strong>Ess</strong>
<a id="moreinfo" href="#" onclick="javascript:show('info'), change_pic('../images/es.jpg'); return false;"> meer...</a></p>
<div id="info" style="display: none">
BLABLABLABLABLABLABLABLA

</div>
<p><strong>Teddy </strong>
<a id="moreinfo2" href="#" onclick="javascript:show('info2'), change_pic('../images/teddy.jpg'); return false;"> meer...</a></p>
<div id="info2" style="display: none">
BLABLABLABLABLABLABLABLA
</div>
<p><strong>Hermi</strong>
<a id="moreinfo3" href="#" onclick="javascript:show('info3'), change_pic('../images/ermi.jpg'); return false;"> meer...</a></p>
<div id="info3" style="display: none">
BLABLABLABLABLABLABLABLA
</div>
<p><strong>Nico</strong>
<a id="moreinfo4" href="#" onclick="javascript:show('info4'), change_pic('../images/foto.jpg'); return false;"> meer...</a></p>
<div id="info4" style="display: none">
BLABLABLABLABLABLABLABLA
</div>
</div>





[/SIZE]