Button-Klick mit Tücken

Novastream

Novastream

Mitglied
Hallo zusammen.

Ich bin recht neu was das Thema JS angeht und daher hab ich ein problem bei dem ihr mir vllt. helfen könnt.
Mein Problem ist folgendes:
Ich habe einen button erstellt der beim Klick auf denselbigen seine farbe ändert. Es sind 5 an der zahl. Weiss, Blau, Rot, Grün und Gelb
So ... das script das ich bis jetzt habe läuft schon mal. Er tauscht die bilder aus, auch in der reihenfolge die ich haben möchte (fängt mit weiss an, dann blau, dann rot usw.) ... soweit alles schön und gut ... jetzt zum eigendlichen
Ich habe mehr als nur einen button. Wenn ich nun einen gdrückt hab ... sagen wir mal bis "Rot" dann fängt er beim nächsten Button nicht mit blau an, beim ersten klick (der weisse ist ja der ausgangsbutton), sondern macht mit grün weiter. Wenn ich den so lasse ist der 3. Button beim ersten Klick dann Gelb. Also immer die folgefarbe.
Ich möchte es aber so haben das er beim ersten Klick immer mit blau anfängt und nicht mit der nächst folgenden Farbe.
Ich steige da nicht hinter.

Hier mal der code

bildwechsel.js
Code: 
var Dir = "http://www.traum-projekt.com/forum/images/";
var Bilder = Array("button_none.png", "button_blue.png", "button_red.png", "button_green.png", "button_yellow.png");
var i = 0;
 
function wechsel(Nr, k) {
	if(k == '+') {
		i++;
	}
	else
	{
		i--;
 	}
  
	if(i>=Bilder.length) {
		i = 0;
	}
	else if(i<0)
	{
		i = Bilder.length-1;
	}
	 
	window.document.images[Nr].src = Dir + Bilder[i];
}

Die HTML
HTML: 
<head>
<title>Unbekannt</title>
<script type="text/javascript" src="js/bildwechsel.js"></script>
</head>
<body>
<img src="http://www.traum-projekt.com/forum/images/button_none.png" name="bildname1" onClick="wechsel('bildname1', '+')" /><br />
<img src="http://www.traum-projekt.com/forum/images/button_none.png" name="bildname2" onClick="wechsel('bildname2', '+')" /><br />
<img src="http://www.traum-projekt.com/forum/images/button_none.png" name="bildname3" onClick="wechsel('bildname3', '+')" /><br />
</body>
</html>
button_none.png ist der weisse button ;)


Ich hoffe das einer von euch mir dabei helfen kann dieses Problem zu lösen. ich weiss selber nicht mehr weiter.
Ich bin für jede hilfe dankbar.

mfg
Novastream
 
Mal davon abgesehen, dass ich das insgesamt anders angehen würde, kannst du es folgendermaßen machen. Das Problem ist ja, dass alle Button den gleichen Zähler "i" verwenden. Deshalb brauchst du für jeden Button einen eigenen Zähler. Diese Zähler merken wir uns in einem Objekt namens "counters". Innerhalb des Objektes gibt es dann jeweils einen Zähler, der dem Namen des Buttons entspricht.

Javascript: 
var Dir = "http://www.traum-projekt.com/forum/images/";
var Bilder = Array("button_none.png", "button_blue.png", "button_red.png", "button_green.png", "button_yellow.png");
//var i = 0;
//Stattdessen ein leeres Objekt für die ganzen Zähler
var counters = {};
 
function wechsel(Nr, k) {
    //Prüfen ob dieser Zähler schon initialisiert wurde. Falls nicht wird er auf 0 gesetzt
    if(!counters[Nr])
        counters[Nr] = 0;

    //Überall wo vorher "i" stand, wird jetzt das Objekt benutzt "counters[Nr]"

    if(k == '+') {
        counters[Nr]++;
    }
    else
    {
        counters[Nr]--;
    }
  
    if(counters[Nr]>=Bilder.length) {
        counters[Nr] = 0;
    }
    else if(counters[Nr]<0)
    {
        counters[Nr] = Bilder.length-1;
    }
     
    window.document.images[Nr].src = Dir + Bilder[counters[Nr]];
}

Ich hoffe, dass es auf Anhieb funktioniert. Ich habe es nicht getestet. Wenn du die Bilder auf "http://www.traum-projekt.com/forum/images/" frei gibst, dann teste ich es. Ich wollte mir jetzt aber nicht extra Bilder dafür erstellen.
 
Perfekt. Genau so hab ichs mir vorgestellt. Ich werd das mal eingehend studieren.
ich danke dir vielmals.

kurze frage noch. Mir hat jemand etwas geholfen bei dem skript. Mir entzieht sich völlig für was das "k" (zeile 7 und 14) steht und was es bewirken soll. Hast du vllt. eine ahnung?
 
Scheinbar kannst du damit die Richtung umdrehen. Wenn du willst, schreib ich es mal so, wie ich es machen würde. Brauchst du die Richtungs-Umdrehung oder sollen die Buttons immer in der gleichen Reihenfolge wechseln?
 
Die Buttons sollen immer in der gleichen reihenfolge erscheinen. Der Weisse ist die Ausgangsbasis, dann der Blaue, anschliessend Rot, Grün und zum schluss Gelb.
Hier die Buttons damits dann anschaulicher wird ;)

button_none.png

button_blue.png

button_red.png

button_green.png

button_yellow.png

button_none.png


und danke das du mir hilfst. Ich mach grad eine fortbildung und versuch mich grad durch js zu wurschteln :D
 
Ich habe den Quelltext kommentiert. Falls du dennoch Fragen hast, stell sie.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Bildlein wechsel dich</title>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		var basePath = "http://www.novastream.de/dshini/images/";
		var images = ["button_none.png", "button_blue.png", "button_red.png", "button_green.png", "button_yellow.png"];
		
		//Das hier ist optional. Dadurch werden alle Bilder schonmal heruntergeladen, damit sie beim Klick auch sofort da sind.
		//Das hat mit dem eigentlichen Problem nichts zu tun.
		for(var i=0;i<images.length;i++) {
			new Image().src = basePath + images[i];
		}
		
		function wechsel() {
			//Falls noch keine Counter-Variable vorhanden ist wird diese auf 0 gesetzt
			//Hier bedienen wir uns der Fähigkeit von JavaScript, jedem Objekt zur Laufzeit neue Eigenschaften zu verpassen
			//Konkret geben wir der jeweiligen Instanz des HTML-Img-Tags eine weitere Eigenschaft "counter"
			if(!this.counter)
				this.counter = 0;
			
			this.counter++;
			
			//Durch die Modulo-Operation spart man sich die Überprüfung, ob man das Ende erreicht hat.
			//Der Zähler geht einfach immer höher. Das ist geschmackssache, ich steh drauf.
			this.src = basePath + images[this.counter % images.length];
		}
	/* ]]> */
	</script>
</head>

<body>
	<div>
		<img src="http://www.novastream.de/dshini/images/button_none.png" onclick="wechsel.call(this);" /><br />
		<img src="http://www.novastream.de/dshini/images/button_none.png" onclick="wechsel.call(this);" /><br />
		<img src="http://www.novastream.de/dshini/images/button_none.png" onclick="wechsel.call(this);" /><br />
	</div>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück