Dymanische Grafikänderung

[Tim Spence]

Hallo NG,

ich habe ein "kleines" Problem mit meinem Script (siehe unten):

Zweck des Scripts: Bilder sollen sich bei jedem klick entsprechend ändern (wie eine Art Schalter: die Grafiken zeigen entweder "an" oder "aus" an)

[Script]----------
function imageSwitch(Bildname){
if (i == 1){
  i = 0;
   if (Bildname== "Bild1") document[Bildname].src = graphic[1].src;
   else if (Bildname== "Bild2") document[Bildname].src = graphic[3].src;
  else document[Bildname].src = graphic[5].src;
}
else{
  i = i + 1;
   if (Bildname== "Bild1") document[Bildname].src = graphic[0].src;
   else if (Bildname== "Bild2") document[Bildname].src = graphic[2].src;
  else document[Bildname].src = graphic[4].src;
}
}

var graphic = new Array ();

graphic[0] = new Image ();
graphic[0].src = "Bild1_an.jpg";

graphic[1] = new Image ();
graphic[1].src = "Bild1_aus.jpg";

graphic[2] = new Image ();
graphic[2].src = "Bild2_an.jpg";

graphic[3] = new Image ();
graphic[3].src = "Bild2_aus.jpg";

graphic[4] = new Image ();
graphic[4].src = "Bild3.an.jpg";

graphic[5] = new Image ();
graphic[5].src = "Bild3_aus.jpg";

i = 0;
-----------------[Ende]

[Beispiel Aufruf im HTML]-----------
<a href="test1.htm" onclick="imageSwitch('Bild1')">
<img name="Bild1" border="0" src="Bild1.jpg"></a>

<a href="test2.htm" onclick="imageSwitch('Bild2')">
<img name="Bild2" border="0" src="Bild2.jpg"></a>

<a href="test3.htm" onclick="imageSwitch('Bild3')">
<img name="Bild3" border="0" src="Bild3.jpg"></a>
-----------------[Ende]

Das Ganz klappt "fast" wunderbar, jedoch muss ich bei manchen Grafiken 2x klicken bis sich das Bild ändert! (die html-testseiten werden jedoch bei 1x schon ausgeführt), was habe ich falsch gemacht oder ist mein Ansatz völlig daneben?

Gruß
Tim

[Struppi]

<a href="test3.htm" onclick="imageSwitch('Bild3')">
<img name="Bild3" border="0" src="Bild3.jpg"></a>

Wenn du auf die Bilder klickst wird auch automatisch der Link ausgeführt. D.h. erst das Skript (also das Bild getauscht) und dann die neue Seite aufgerufen dann ist der Bildtausch wieder Rückgängig gemacht. Dass es überhaupt funktioniert liegt daran, dass der Browser die Seite nicht immer neu lädt und somit der Bildtausch sichtbar bleibt beim 2. Klick.

Um zu vermeiden, das der Link ausgeführt wird muss der onclick Event ein false zurückgeben ob das aber gewünscht ist ist fraglich. Ich vermute du suchst sowas http://javascript.jstruebig.de/source/mouseover.html

Struppi.

[Tim Spence]

hi Struppi,

danke für deine Info und den Link, was ich eigentlich möchte ist folgendes:

1 Seite auf der verschiedene DIV Container ein bzw ausgeschaltet werden kann (ist ein anderes Script, welches auch funktioniert) und eine Grafik das aussieht wie ein Schalter. Diese Grafik stellte also eine Art Button dar. Bei Mausklick auf diesen Schalter wird die Ausgangsgrafik (Grafik_A) mit einer neuen Grafik (Grafik_B) ausgetauscht. Bei erneuten Klick auf diesen Schalter soll wieder die Grafik_A angezeigt werden usw....

Gruß
Tim

[Struppi]

1 Seite auf der verschiedene DIV Container ein bzw ausgeschaltet werden kann (ist ein anderes Script, welches auch funktioniert) und eine Grafik das aussieht wie ein Schalter. Diese Grafik stellte also eine Art Button dar. Bei Mausklick auf diesen Schalter wird die Ausgangsgrafik (Grafik_A) mit einer neuen Grafik (Grafik_B) ausgetauscht. Bei erneuten Klick auf diesen Schalter soll wieder die Grafik_A angezeigt werden usw....

Ja und was hast du an meiner Erklärung nicht verstanden?

Struppi.