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>  

[suit]

Such' in der jQuery-Dokumentation vorrangig nach each() und hover().

[Liko]

Such' in der jQuery-Dokumentation vorrangig nach each() und hover().

each()?
hmm eigentlich wollte ich das ganze nur mit einer ID
und nicht referenz1, referenz2... usw.

[suit]

each()?

Erst lesen, dann nachfragen.

hmm eigentlich wollte ich das ganze nur mit einer ID
und nicht referenz1, referenz2... usw.

Häh? Deine IDs kannst du getrost zum Teufel werfen, sie sind nicht notwendig.

[Liko]

each()?

Erst lesen, dann nachfragen.

hmm eigentlich wollte ich das ganze nur mit einer ID
und nicht referenz1, referenz2... usw.

Häh? Deine IDs kannst du getrost zum Teufel werfen, sie sind nicht notwendig.

Weiss leider nicht wie ich das genau mit each() anstellen soll. sorry

[suit]

Weiss leider nicht wie ich das genau mit each() anstellen soll. sorry

Geht sogar ohne each

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

[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