Javascript vergisst Variable + merkwürdiges Verhalten...

[Sven Rautenberg]

Moin!

window.setTimeout("lightimage(bildnummer)",40);

Die Javascript Funktion "lightimage" vergisst die Variable "bildnummer" in der Zeile window.setTimeout... aber warum?

Der Befehl, der nach 40 Millisekunden ausgeführt wird, lautet:

lightimage(bildnummer);

Und da bildnummer keine globale Variable ist, sondern undefiniert, hast du hier ein Problem.

Besser: Übergib direkt die Bildnummer:

window.setTimeout("lightimage("+bildnummer+")",40);

Der dann ausgeführte Befehl wird ungefähr so lauten:

lightimage(1);

Und das ist genau, was du brauchst, denn so wird die Funktion ja wohl erstmalig auch aufgerufen.

Wie ich forum[i].src; dynamisch mache, dass dann zB mail[i].src in einer Variable gespeichert ist, die dann statt forum[i].src datsteht, weiß ich jetzt auch noch nicht.

Für sowas sind zweidimensionale Arrays ganz super.

anibilder = new Array();
anibilder[0] = new Array();
anibilder[0][0] = new Image();
...

Dann stehen deine Bilder nicht mehr in forum[0-5], sondern in anibilder[0][0-5].

Die Auswahl, welche Animation genommen werden soll, muß natürlich der Funktion übergeben werden.

Das nächste Problem, das ich nicht verstehe ist, wenn ich den mouseover Effekt auslöse und mit der Maus wieder vom Link weggehe, funktioniert das ganze einmal und zwar im IE. Opera und Mozilla spielen die Animation auch nur einmal ab, und zwar auch nur dann, wenn ich ganz vorsichtig auf den Link fahre. Wenn ich das nicht vorsichtig tue, wird der onmouseout Effekt sofort nach dem onmouseover Effekt abgespielt, obwohl ich mit der Maus den LInk noch nicht verlassen habe. Was kann da sein?

Die Browser sind teilweise ein wenig seltsam, was die Erzeugung von Events angeht. Da ist man am besten bedient, wenn man die Events nicht sofort für eine Aktion heranzieht, sondern erstmal etwas abwartet und dann tut - wenn man noch soll.

Das bedeutet aber wieder Arbeiten mit setTimeout, außerdem müssen die durch Events erzeugten Wünsche irgendwie global zwischengespeichert werden und dürfen sich nicht gegenseitig überschreiben.

Du mußt verhindern, dass sich beispielsweise zwei Animationen gegenseitig in die Quere kommen. Wenn ein mouseover durch ein nachfolgendes mouseout unterbrochen wird, mußt du das mouseover abbrechen und stattdessen das mouseout  abspielen. Allerdings wäre es für die Animation blöd, wenn das mouseover nur bis zur Mitte gekommen ist, mit dem mouseout bei letzten Bild zu beginnen. Du mußt also im Prinzip für jeden Button eine (am besten globale) Variable haben, welches Bild derzeit angezeigt wird. Wenn du noch mouseover machen sollst, wird die Bildzahl inkrementiert, wenn du mouseout machen sollst, wird sie dekrementiert, solange bis das erste oder letzte Bild erreich ist.

Deine Funktion läuft auch deshalb nur einmal, weil du zwar globale Variablen i und j zum Zählen der Bilder verwendest, diese aber jeweils nur erhöht (i) oder erniedrigt (j) werden - und es dann bleiben. Das heißt: Nach dem ersten mouseover ist i auf 5 - entsprechend wird das zweite Mouseover direkt das letzte Bild aufrufen, ohne es zu animieren. Beim Mouseout ist das genauso.

Ich denke, du hast noch einiges zu tun. Insbesondere die in den Browsern ziemlich wackligen Events dürften dir einiges Kopfzerbrechen bereiten. Du solltest dir dafür irgendeine Art von Debugging-Routine schreiben, dir dir (mittels alert() oder auch durch document.write()-Ausgabe in ein Popup) anzeigen, welche Events gerade gefeuert haben. Oft ist es so, dass durch Änderungen an der dargestellten Seite (z.B. durch Ändern des Bildes unter dem Mauszeiger) zuerst mouseout feuert (weil das alte Bild, wenn es nicht mehr gezeigt wird, ja auch nicht mehr unter dem Mauszeiger ist), und dann sofort mouseover (weil das neue Bild unter dem Mauszeiger ist).

- Sven Rautenberg