mudar imagem ( + para -) quando clica no menu

[Marlon Souza 0]

amigos tenho um menu segue abaixo

 

<script type="text/javascript">
function change(id){ 
	 ID = document.getElementById(id); 
	 
	 if(ID.style.display == "") 
		  ID.style.display = "none"; 
	 else 
		  ID.style.display = ""; 
	  }
</script>
<style type="text/css">
BODY { text-align: center}
.tbl { FONT: NORMAL 11px/14px verdana, arial, sans-serif; border: 1px solid black; padding: 3px;  height: auto }
A {COLOR: #333333; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold }
A:hover { COLOR: black; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold}
</style>
<table width="220">
<tr>
<td title="Show/Hide" onclick="change(1)" style="cursor: hand" class="tbl" width="208" height="25"><img src="img/mais.gif"> <a onclick="change(1)" href="#">Link 1</a></td>
</tr>
<!-- Sub menu 1 -->
<tr style="display: none" id="1">
<td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
Sub 1</td>
</tr>
<tr>
<td title="Show/Hide" onclick="change(2)" style="cursor: hand" class="tbl" width="208" height="25">» <a onclick="change(2)" href="#">
Link 2</a></td>
</tr>
<!-- Sub menu 2 -->
<tr style="display: none" id="2">
<td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
Sub 2</td>
</tr>
<tr>
<td title="Show/Hide" onclick="change(3)" style="cursor: hand" class="tbl" width="208" height="25">»
<a href="#">Link</a><a onclick="change(3)" href="#">
</a><a href="#">3</a></td>
</tr>
<!-- Sub menu 3 -->
<tr style="display: none" id="3">
<td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
Sub 3</td>
</tr>
</table>

quando eu clicar na imagem o menu raiz vai abrir, e quero que a imagem mais.gif, mude para menos.gif, alguem pode me dar uma maozinha, em js eu sou pessimo.

[andreia_sp 1]

Faz o seguinte, na função change pega o Objeto imagem (mais) e muda o src dele.. exemplo:

 

document.getElementById("id_da_imagem").src = "menos.gif"