Markus Herrmann: Bitte testen und feedback zu Problem

Hallo Leute,

ich hab das zwar schonmal gepostet hier, aber irgendwie bekomm ich überhaupt kein Feedback. Vielleicht weiss ja wirklich keiner die Lösung, aber vielleicht könnt ihr mir ja mal mitteilen, bei welchen Versionen von IE und welchen Betriebssystemen das Problem auftaucht. Und vielleicht hat ja doch jemand ne Lösung

http://www.dancingpixel.de/maus.htm
(nur IE)

Ich habe nämlich nachwievor das Problem, dass mouseOut-Ereignisse einer Ebene unterschlagen werden, wenn ich den Inhalt der Ebene bei einem mouseOver-Ereignisse ändere. Stattdessen bekomme ich ganz viele mouseOver-Ereignisse, wenn ich die Maus innerhalb des Div-Bereichs bewege.

Tritt das Problem bei Euch auch auf?
Wie kann ich es anders lösen?
Ich brauche auf jedenfall die umgebende, absolut positionierte Ebene.
Bisher war es so, dass ich darin weitere DIVs hatte (nicht absolut positioniert), deren Inhalt durch Maus-Ereignisse geändert wurde.
Aber das klappt ja irgendwie nicht. Zumindest nicht beim IE, für den Netscape mach ich es sowieso ganz anders.

  1. »»Vielleicht weiss ja wirklich keiner die Lösung

    Doch.

    Es sind einige Faktoren, warum das nicht klappt.

    1. Du verschachtelst mehrere DIVs ineinander! Tu das NIEMALS.
    2. Du gibst dem eigentlichen DIV keine absoluten Werte.
    3. Du solltest bei JEDER style-Angabe auch den letzten Wert mit Semikolon abschliessen.

    Wenn Du das alles beachtest, kannst Du Deinen Code auf folgende Zeilen beschränken:

    <div style="position:absolute; top:50; left: 50; width:250;background:#AAAAAA;text-align:center;" id="test" onMouseOver="javascript:document.all.test.innerHTML = 'OVER';" onMouseOut="javascript:document.all.test.innerHTML = 'OUT';">
    TEXT
    </div>

    Viele Grüsse,

    Thorsten

    1. danke für die Antwort, das ist ja schonmal was.

      Leider hilft es mir trotzdem nicht ganz weiter. Der Code war nur eine Abstraktion meines Problemns und Dein konkreter Lösungsvorschlag ist leider zu konkret :-) Versteh dass nicht falsch, dass ist natürlich sehr nett von Dir.

      Du hast Recht, mein beispiel könnte man natürlich so schreiben wie Du es angegeben hast, nur lässt sich das nicht auf mein eigentliches Skript übertragen, da ich (sofern ich keine andere Möglichkeit finde)' die verschachtelten DIV's benötige

      Um das zu verdeutlichenhole ich etwas weiter aus.
      Das ganze wird ein Kaskadierendes Menü. Ein Menü entspricht einem DIV. Dieses enthält Menüpunkte die bisher ebenfalls als DIV's realisiert waren und mit Hilfe von mouseOver und mouseOut erkennen liessen, ob sie selektiert waren oder nicht.

      Also mal in Pseudo-HTML/JavaScript folgendermassen

      <DIV> // absolut positioniert, 'Container' für Menü
        <DIV onmouseOver="selektiert(0)" onMouseOut="deselektiert(0)"> MENÜPunkt 1</DIV>
        <DIV onMouseOver="selektiert(1)" onMouseOut="deselektiert(1)"> MENÜPunkt 2</DIV>
        <DIV onMouseOver="selektiert(2)" onMouseOut="deselektiert(2)"> MENÜPunkt 3</DIV>
      </DIV>

      Dort wo jetzt 'MENÜPunkt X'steht wird dynamisch der entsprechende Text (oder HTML) eingefügt (so wie ich das im Beispiel mit innerHTML gemacht habe)und zwar jenachdem, ob der Menüpunkt selektiert ist oder nicht ein anderer. Und eben bei dieser Anordung erhalte ich die bereits geschilderten Probleme. Selbst wenn ich die inneren DIV's durch etwas anderes wie <span>, <table>(eine Spalte, eine Zeile) ersetze.

      Mir war bisher nicht bekannt, dass ich DIV's nicht verschachteln darf, warum nicht? Mal abgesehen funktioniert diese Anordung prima, aber leider nur so lange, bis ich mit "innerHTML" den Inhalt des verschachtelten DIV's ändere.

      Wäre super wenn jemand vielleicht ne Idee hätte, wie ich meine Problemstellung anders lösen könnte.

      Danke,

      Markus

      1. Das Problem ist gelöst.
        Es handelt sich offensichtlich doch um ein Problem des Microsoft Internet Explorers.
        Für alle die es interessiert hier ein möglicher workararound:

        Der innere DIV erhält zunächst nur den mouseOver-Handler.
        Wenn dieser aufgerufen wird, um den HTML-Inhalt des inneren DIVs zu ändern wird nicht mit 'innerHTML=...' der Inhalt geändert sondern mit
        'outerHTML=...' der Inhalt und das DIV selbst verändert und zwar so, dass der innere DIV diesmal statt dem mouseOver-Handler den mouseOut-Handler erhält.
        Und siehe da, egal wieviele Verschachtelungen: alles funktioniert Prima.

        Danke an Salokin, der sich mit dem Problem auseinandergesetzt hat und mir diese Lösung geschickt hat.