Help with SWAP IMAGE

[roryt]

<tr>
                <td height="123" bgcolor="#FFFFFF"><table width="140" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999">
                  <tr>
                    <td width="65" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone Us','','basic_interface/symbols/phone_over.jpg',1)"><img src="basic_interface/symbols/phone.jpg" alt="Phone Us" name="Phone Us" width="40" height="40" border="0" id="Phone Us" onmouseover="MM_swapImage('detail','','basic_interface/symbols/phone_num.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone us','','basic_interface/symbols/phone_over.gif',1)"></a></div></td>
                    <td width="69" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="center"><a href="mailto: [e-mail]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('email us','','basic_interface/symbols/email.jpg',1)"><img src="basic_interface/symbols/email_over.jpg" alt="Email Us" name="email us" width="40" height="40" border="0" id="email us" onmouseover="MM_swapImage('detail','','basic_interface/symbols/email_detail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div></td>
                  </tr>
                  <tr>
                    <td colspan="2" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="basic_interface/symbols/detail_out.jpg" alt="Rollover the phone or email symbol above and the detail will show here" name="detail" width="140" height="25" id="detail" /></td>
                    </tr>
                  
                </table></td>
              </tr>

This is my code to onmouseover swap current image and and different image and then restore both images.

But when I you move the mouse out the "different" image doesn't swap restore. Please could somebody tell me why this is. I used dreamweaver to do this and it has never done this wrong before.

Thanks for your help.

[migcosta]

Well.. you have a big mess there... use this it’s more simple…. I made it my self!

<script type="text/JavaScript">
function rollover_img (bi, im){ // 1 bi = id of the imagem you want to swap; 2 im = the image you want to display
document.getElementById(bi).src = im;
}
</script>

Paste this right before the </HEAD> tag.

Them the image were you want to start the rollover should be something like this..

<img src="1.png" name="Image2" width="161" height="150" border="0" id="Image2" onmouseover="rollover_img('detail','1.png'), rollover_img('Image2','1.png')" onmouseout="rollover_img('detail','2.png'), rollover_img('Image2','2.png')" />

And you are ready to go..