Quando clicchi immagine cambia. I modi provati non funzionano.

[Mighel123]

Sto cercando un modo per cambiare l'immagine al click con un'altra. Ho cercato in lungo e in largo e tutti tutti i forum, domande, pagine web, esempi non mi funzionano. Questo è il mio codice:

<table width="100%" border="0" id="bottoneM"  >        
<tr><td width="18%"></td>        
<td>        
<fieldset id="sugg_risp">        
<center>        
<table border="0" height="100%" width="100%">            
<tr>            
<td width="2%" align="center"></td><td width="2%"></td>            
<td height="100%" width="88%" align="left">           
<font face="Geneva, Arial, Helvetica, sans-serif">Descrivi il tuo problema</font>            
</a></td>            
<td>

<IMG SRC="freccia1.gif" name="FOTO_DA_CAMBIARE" >

</td>            
</tr>        
</table>        
</center>        
</fieldset>        
</td>                
<td width="18%"></td>        
</tr><tr><td></td><td>                        
<div id="menuM" style="display:none;">        
<table border="0" height="100%" width="100%">            
<tr>            
<td width="2%" align="center"></td><td width="2%"></td>            
<td height="100%" width="88%" align="left">            
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 1</font>            
</a></td>            
</tr>                        
<tr>            
<td width="2%" align="center"></td><td width="2%"></td>            
<td height="100%" width="88%" align="left">            
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 2</font>            
</a></td>            
</tr>
            
<tr>            
<td width="2%" align="center"></td><td width="2%"></td>            
<td height="100%" width="88%" align="left">            
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 3</font>            
</a></td>            
</tr>
            
<tr>            
<td width="2%" align="center"></td><td width="2%"></td>            
<td height="100%" width="88%" align="left">            
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 4</font>            
</a></td>            
</tr>
            
<tr>            
<td width="2%" align="center"></td><td width="2%"></td>            
<td height="100%" width="88%" align="left">            
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 5</font>            
</a></td>            
</tr>        
</table>        
</div>        
</td></tr>


</td>
</table>

Quando clicco la table iniziale vorrei che cambiasse la "freccia1.gif" in "freccia2.gif".

Se vi serve, per l'elenco che appare ho usato questo codice:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#bottoneM").click(function(){
      $("#menuM").slideToggle();
    }); 
  });


</script>

Grazie mille per le rispose!!