codice:
<script type="text/javascript">
<!--
function controllo(quale){
	if(quale.value!=''){
		var im=document.createElement('img');
		var pattern= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
		if(pattern.test(quale.value)){
			im.setAttribute('src','smile.gif');
		}
		else im.setAttribute('src','frown.gif');
		quale.parentNode.replaceChild(im,quale.nextSibling);
	}
}
//-->
</script>
codice:
<form>
<input type="text" id="email" onblur="controllo(this)" /><span></span>
</form>
in questo esempio ho un elemento vuoto nell' html che immediatamente segue il campo, ma se la tua struttura html ha gia' un elemento destinato a contenere l' immagine potrebbe essere opportuno cambiare lo script