Ciao a tutti,

ho da poco iniziato a studiare jquery ed ho difficoltà ad ottenere il risultato desiderato in questa pagina:

codice:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
   function invia() {
	jQuery.support.cors = true;
	$.ajax({
	  crossDomain: true,
	  async : true,
      type: "POST",
      data: "pinD7",
      dataType: "text/html",
      cache: false,
      url: "http://indirizzo_ip",
      success: function( r ){
		 $( "#result" ).html("led acceso");//html( r );
		 document.getElementById("event").src="ledon.png";
      },
      error: function(){$( "#result" ).html("errore");}
	 });
	
	};
   
</script>
</head>
<body>
<input id="prova" onclick="invia()" type="button" value="Accendi led"/>
<div id="result">
<img id="event" src="ledoff.png" alt="Accendi" title="Accendi" width="70" height="70"/>  
</div>
</body>
</html>
In pratica, quando faccio click sul bottone "Accendi led", vorrei che oltre alla scritta "led acceso" cambiasse l'immagine visualizzando "ledon.png".
Attualmente, con il codice che ho scritto, non mi cambia l'immagine. Cosa c'è di non corretto?