# jQuery mehrere Bilder wechseln



## goto; (12. September 2011)

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 (12. September 2011)

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; (12. September 2011)

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 (12. September 2011)

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


----------



## CPoly (12. September 2011)

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; (12. September 2011)

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 (12. September 2011)

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


----------



## goto; (12. September 2011)

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 (12. September 2011)

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; (12. September 2011)

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


----------



## CPoly (12. September 2011)

Mit Klasse meine ich, dass du deinem CSS eine weitere Klasse hinzufügst, z.B. so


```
.icon {
    background-image: url('tl_files/SasseFiles/images/menu_grey.png');
}

.icon.active {
    background-image: url('tl_files/SasseFiles/images/menu_green.png');
}
```

Jetzt musst du nur noch die Klasse des Elementes ändern. Das löst aber dein eigentliches Problem noch nicht. Dazu würde ich einfach das aktuell aktive Element merken.


```
$(function() {
    var curActive = null;
	
    $('.btn').mouseenter(function() {
        //prüfen ob es ein anderes Element ist
        if(curActive === this) {
              return;//Nichts machen, weil es das gleiche ist
        }

        curActive = this;
  
        $('.icon').removeClass('active');
        
        $('.icon', this.parentNode).addClass('active');

        var pfad = $('.bild').val();    
        var bilder = pfad;
		
        $('#movie').html(bilder);
    });
});
```


----------



## goto; (13. September 2011)

Super Antwort  Funktioniert 1A * Daumen hoch
Danke


----------

