(setTimeout) - Timer hängt sich bei mehreren Ebenen auf?

[Sue im Web]

Hallo an alle,

bitte schaut Euch mal meinen nachfolgenden Quelltext an und sagt mir, wo hier der Denkfehler liegt. Ich bin nämlich langsam am Verzweifeln....

Es geht hier um ein Menü mit 7 Buttons, die bei MouseOver nach rechts gescrollt werden (dabei sichtbar werden), bei MouseOut zurücklaufen und bei Click sichtbar stehenbleiben. Auf der Seite befinden sich:

Ebene 1:  DIV mit dem Hintergrundbild des Menüs
Ebene 2:  7 DIVS mit den einzelnen Buttongrafiken
Ebene 3:  DIV mit dem Deckbild des Menüs und 7 unsichtbaren Klickbuttons

Um für jeden Button einen Timer zu starten, habe ich die Timer 1 und 2 für jede Objektreferenz definiert.

Soweit klappt auch alles, aber sobald ich mit der Maus schneller über die Buttons fahre, fangen die an, verrückt zu spielen (sie zittern hin und her). Außerdem hängen sich mit der Zeit, nach dem Anklicken verschiedener Buttons und weiterem Überfahren mit der Maus die Timer der anderen (nicht angeklickten) Buttons auf, so dass diese sichtbar stehenbleiben und nicht mehr zurückfahren. Wie gesagt: Nicht gleich - erst funktioniert alles einwandfrei!

Hier der Quellcode:
<pre>
var speed = 25;

function LayerObj(name,pos) {

if (IE) {
      this.css = eval ("document.all." + name + ".style");
      }
  if (NN4) {
      this.css = eval ("document." + name);
      }
  if (DOM) {
      this.css = eval ("document.getElementById('"+name+"').style");
      }

this.name = name;
  this.start = pos;
  this.right = goRight;
  this.left = goLeft;
  this.css.left = pos;
  this.begin = parseInt(this.css.left);
  this.end =  0;
  this.timer1;
  this.timer2;
  this.obj = name + "Object"
  eval(this.obj + "=this");
  return this;
}

function goRight(loop) {
  clearTimeout(this.timer1);
  clearTimeout(this.timer2);

if (loop) {
    if (parseInt(this.css.left) < this.end) {
      this.css.left = parseInt(this.css.left) + 10;
      this.timer1 = setTimeout(this.obj+".right("+speed+")",speed);
      }
    }
  else { // bei Klick den Button stehenlassen u. evtl. TopMenü resetten

for (i = 0; i < 7; i++) {

if (IE)
             obj = eval("document.all.Left"+i);
         if (NN4)
             obj = eval("document.Left"+i);
         if (DOM)
             obj = eval("document.getElementById('Left"+i+"')");

if (obj.id != this.name)
             obj = (IE || DOM) ? obj.style : obj;
             obj.left = this.start;
         }
    this.css.left = this.end;
    this.begin = this.end;
    }
}

function goLeft() {
  clearTimeout(this.timer1);
  clearTimeout(this.timer2);

if (parseInt(this.css.left) > this.begin) {
      this.css.left = parseInt(this.css.left) - 10;
      this.timer2 = setTimeout(this.obj+".left("+speed+")",speed);
      }
}

function initLayer () {
  Btn1 = new LayerObj ('Left1',-130);
  Btn2 = new LayerObj ('Left2',-130);
  Btn3 = new LayerObj ('Left3',-130);
  Btn4 = new LayerObj ('Left4',-130);
  Btn5 = new LayerObj ('Left5',-130);
  Btn6 = new LayerObj ('Left6',-130);
  Btn0 = new LayerObj ('Left0',-130);
}
</pre>

"initLayer()" wird beim Laden der Seite aufgerufen.
Der Aufruf der Scrollfunktion erfolgt über die unsichtbaren Klickbuttons auf der Seite folgendermaßen:

<pre>

Hier nur der 1. Button, die anderen sind gleich

<a href="ueberuns.htm" target="Main" onMouseOver="Btn1.right(true)" onMouseOut="Btn1.left(true)" onClick="Btn1.right(false)"><img name="LeftBtn1" border="0" src="images/spacebtn.gif" width="110" height="33" onMouseUp="SetTitle(1)"></a>

</pre>

Ich hoffe, ich habe das Problem verständlich beschrieben.
Bitte helft mir!

Grüße
Sue