jQuery Links Rollover wechselt ein Bild

[Liko]

Hallo Leute

Folgendes habe ich hier, nun möchte ich dies vereinfachen und ohne PHP Code lösen.
Momentan gebe ich jedem LI eine ID und auch jedem BILD
Jetzt möchte ich das so lösen, dass es ohne verschiedene IDs geht.
so das belibig viele referenzen kommen können.

Ich möchte auf den LIs ein Rollover haben, das auch dem 2 DIV angezeigt wird.

Kann mir jemand ein Tipp geben wie ich das schöner lösen kann?

Vielen Dank

<div class="box_left" style="float:left;">  
            <ul>  
            <li id="referenz1"> <a href="#">Referenz 1</a></li>  
            <li id="referenz2"> <a href="#">Referenz 2</a></li>  
            <li id="referenz3"> <a href="#">Referenz 3</a></li>  
            <li id="referenz4"> <a href="#">Referenz 4</a></li>  
            <li id="referenz5"> <a href="#">Referenz 5</a></li>  
            </ul>  
            </div>  
  
            <div class="box_right" style="float:right;">  
            	<img src="/images/referenz1.jpg" width="240" height="123" id="pic_referenz1" />  
                <img src="/images/referenz2.jpg" width="240" height="123" id="pic_referenz2" style="display:none;" />  
            </div>  
  
            <div class="clear"></div>

  
<script type="text/javascript">	  
<?php for ($i=1;$i<=5;$i++) { ?>  
	$('#referenz<?php echo $i; ?>').mouseenter(function() {  
		$('#pic_referenz1').css('display','none');  
		$('#pic_referenz<?php echo $i; ?>').removeAttr('style');  
	});  
	$('#referenz<?php echo $i; ?>').mouseleave(function(){  
		$('#pic_referenz<?php echo $i; ?>').css('display','none');  
		$('#pic_referenz1').removeAttr('style');  
	});  
<?php } ?>  
</script>