jQuery Links Rollover wechselt ein Bild

[Liko]

$('#box_left li').hover(
  function() {
    // over
    alert($(this).index());
  },
  function() {
    // and out
  }
);

Vielen Dank, jetzt habe ich folgendes noch

  
<div class="box_left" style="float:left;">  
	<ul>  
		<li>  
			<a href="#">Referenz 1</a>  
		</li>  
		<li>  
			<a href="#">Referenz 2</a>  
		</li>  
		<li>  
			<a href="#">Referenz 3</a>  
		</li>  
		<li>  
			<a href="#">Referenz 4</a>  
		</li>  
		<li>  
			<a href="#">Referenz 5</a>  
		</li>  
	</ul>  
</div>  
<div class="box_right" style="float:right;">  
		  
	<img src="referenz1.jpg" />  
	<img src="referenz2.jpg" style="display:none;" />  
	<img src="referenz2.jpg" style="display:none;" />  
	<img src="referenz2.jpg" style="display:none;" />  
	<img src="referenz2.jpg" style="display:none;" />  
</div>  
<div class="clear"></div>  
[code lang=javascript]<script type="text/javascript">  
$('.box_left li').hover(  
  function() {  
    // hover  
    $('.box_right img').eq($(this).index()).removeAttr('style');  
    //alert($(this).index());  
  },  
  function() {  
    // hover out  
    $('.box_right img').eq($(this).index()).attr('style','display:none;');  
  }  
);  
</script>

[/code]

Wie kann ich jetzt machen das die erste referenz, standarmässig immer angezeigt wird? weil so habe ich dann kein bild mehr wenn ich sozusagen mouseover bin