jQuery mehrere Bilder wechseln

[goto;]

Hallo liebe Community,

stehe gerade vor folgendem Problem.

Es soll eine Art Banner erstellt werden, in diesem soll auf der rechten Seite ein Menü erscheinen. Auf der Linken Seite ein Bereich wo die Videos / Bilder angezeigt werden.

Nun soll durch ein Mouseover auf dem Menü die Bilder/Videos aus der Linken Seite ersetzt werden.

Noch hinzu soll beim Menü ein Grüner Punkt vor den Einträgen erscheinen.

Mein erster Ansatz war direkt über JS, das waren dann aber schon gut und gern 50 Zeilen, das war mir dann zu unübersichtlich. Nun habe ich den weg über jQuery eingeschlagen.

Problem ist nun, dass zwar die Bilder, also der grüne Punkt ersetzt werden, jedoch nur beim ersten, da ich dafür das jQuery habe, nun müsste also eine ID mit gegeben werden sprich -> "bild_1" o. "bild_2"

Sprich: so sieht das ganze im Quellcode aus:

<li id="bild_1">
<div id="menu_icon_1"></div>
<a href="#">
<h5>rapid</h5>
<h6>
</a>
<li id="bild_2">
<div id="menu_icon_2"></div>
<a href="#">
<h5>rapid</h5>
<h6>
</a>
</li>

Das geht so weiter bis 4.

Nun kommt das jQuery

<script type="text/javascript">
    	$(document).ready(function(){

			
			$("#bild"+id+" a").toggle(
			function(){
				$("#menu_icon").css({"background-image":"url('tl_files/SasseFiles/images/menu_green.png')"});
				$("#menu_icon").css("width","23px");
				$("#menu_icon").css("height","25px");
			},
			function(){
				$("#menu_icon").css({"background-image":"url('tl_files/SasseFiles/images/menu_grey.png')"});
				$("#menu_icon").css("width","23px");
				$("#menu_icon").css("height","25px");
			}
			
		);

		 
		});
		
		
	</script>

Problem besteht also bei der ID übergabe.

Gibt es eine möglichkeit das umzusetzen ohne 4 mal das selbe Script mit anderen ID´s zu erstellen?

Ich hoffe es ist einigermaßen verständlich und bedanke mich schon jetzt bei euch

 

[javaDeveloper2011]

Hi,

ich denke du könntest ne for-Schleife schreiben, den menu_icons, dann einfach id's von 1-4 geben und z.B. so weiter machen:
$("#"+i).css({"background-im...
(i ist die Zählvariable),
(zwar nicht getestet, müsste doch aber eigentlich hinhauen)

javaDeveloper2011

 

[goto;]

Hallo danke für Deine Antwort.
Leider brachte die for-schleife keinen Erfolg. Momentan hab ich diesen Weg eingeschlagen:

<script type="text/javascript">
    	$(document).ready(function(){			
			var id = $('.id').val();   		
			$("#bild_"+id).toggle(
			function(){
				$("#menu_icon_"+id).css({"background-image":"url('tl_files/SasseFiles/images/menu_green.png')"});
				$("#menu_icon_"+id).css("width","23px");
				$("#menu_icon_"+id).css("height","25px");
			},
			function(){
				$("#menu_icon_"+id).css({"background-image":"url('tl_files/SasseFiles/images/menu_grey.png')"});
				$("#menu_icon_"+id).css("width","23px");
				$("#menu_icon_"+id).css("height","25px");
			}
		
		);		
		 
		});
		
		
	</script>

Und hier der html dazu:

<li id="bild_0" style="height:83px;">
<div id="menu_icon_0"/>
<a href="#">
<h5>
<h6>
<input type="hidden" id="id" value="0" class="id" name="id"/>
</a>
</li>
<li id="bild_1" style="height:83px;">
<div id="menu_icon_1"/>
<a href="#">
<h5>
<h6>
<input type="hidden" id="id" value="1" class="id" name="id"/>
</a>
</li>

jedoch wird hier auch wieder nur das erste angezeigt. Rein logisch, sollte es doch funktionieren. Der Wert des "Input"-Feldes wird ja mit übergeben und somit der Wert 1,2,3 o. 4.

 

[javaDeveloper2011]

Könnte man nicht auch einfach "#menu_icon_"+id durch ".id" ersätzen?

 

[CPoly]

So würde ich es machen. Folgendes HTML

<li>
    <span class="icon"></span>
    <a href="#" class="btn">
        <h5>rapid</h5>
    </a>
</li>
<li>
    <span class="icon"></span>
    <a href="#" class="btn">
        <h5>rapid</h5>
    </a>
</li>

$(function() {
	$('.btn').toggle(function() {
		$('.icon', this.parentNode).css("background-image", "url('tl_files/SasseFiles/images/menu_green.png')");
	}, function() {
		$('.icon', this.parentNode).css("background-image", "url('tl_files/SasseFiles/images/menu_grey.png')");
	});
});

Die Änderung von width und height habe ich weggelassen, weil die keinen Sinn gemacht haben (beides mal identisch).

Das div habe ich entfernt, weil es nicht innerhalb eine li stehen darf. Genauso wie das h5 nicht in dem a stehen dürfte.

 

[goto;]

Hallo,

klappt super.

Hab es nun noch etwas umgestellt.

Die Menüs sollen schon beim Mouseover aktiviert werden, dass habe ich ergänzt.

jedoch klappt es dann mit dem else strang nicht.


Der Menüpunkt soll aktiviert werden, sobald man mit der Maus drüber fährt - und auch erst wieder deaktiviert wird, wenn man auf einen anderen Menüpunkt fährt.

Hier mal der angepasste Code.

 	<script type="text/javascript">
    	
$(function() {
    $('.btn').mouseover(function() {
        $('.icon', this.parentNode).css("background-image", "url('tl_files/SasseFiles/images/menu_green.png')"); 
		
		var pfad = $('.movie').val();    
		var bild ='...Content...';
		
		$('#movie').html(bild);

    });
})	
	</script>

Wenn ich nun nur einen Mouseout unter die Mouseover funktion setzt, hat es leider zufolge, dass das Menü auch deaktiviert wird, wenn ich mit der Maus einfach aus dem Menü gehe, ohne ein anderen Punkt anzupeilen. Jedoch, soll immer ein Menüpunkt aktiv sein.

Mir würde schon ein kleiner Tipp reichen, den rest setze ich mir zusammen.

Vielen Dank

 

[CPoly]

Wenn du es so haben willst, brauchst du gar kein mouseout. Setz einfach am Anfang der mouseover Funktion alle Punkte auf deaktiviert.

 

[goto;]

So, ein letztes mal noch

Ich hab das mouseover gegen mouseenter ersetzt, da sonst bei jeder mousebewegung etwas nachgeladen wird.

Wenn ich nun Menü 1 verlasse, ist der mouseenter active, wenn ich mit der Maus aus dem Menübereich gehen und danach gleich wieder mit der Maus auf Menü 1 gehe, wird neu geladen, kann man das unterbinden?

Viele Grüße

 

[CPoly]

Wie sieht denn jetzt ein Code aus? Vielleicht solltest du anstatt das Hintergrundbild immer zu ändern einfach eine Klasse "active" benutzen. Würde auch deinen Code vereinfachen (addClass, removeClass, toggleClass)

 

[goto;]

Hallo,

hier der Code

 	<script type="text/javascript">
    	
$(function() {
	
	
	
    $('.btn').mouseenter(function() {
		$('.icon').css("background-image", "url('tl_files/SasseFiles/images/menu_grey.png')");
		
		
        $('.icon', this.parentNode).css("background-image", "url('tl_files/SasseFiles/images/menu_green.png')");
		
		var pfad = $('.bild').val();    
		var bilder = pfad;
		
		$('#movie').html(bilder);

    });
})	
	</script>

und hier die html

<li class='btn'><div style='float:left;' class='icon'></div><h5>".$menus["headline"]."</h5><h6>".$menus["description"]."</h6><input type='hidden' value='".$menus["pic"]."' class='bild' name='bild'></li>

Wie meinst du, eine Klasse verwenden?

Viele Grüße