onMouseOver DIV anzeigen

[Felix Riesterer]

Lieber hacker676,

wenn man z.b. mit der maus über einen link geht soll ein div-container angezeigt werden, das funzt auch aber es wird beim IE in der statusleiste ein fehler angezeit.

und welcher Fehler steht da?
-> Zeile 61, Zeichen 9: "'wmtt' ist undefiniert"
(Warum schreibst Du das nicht gleich dazu?!)

Und was sagt der uns?
-> Du hast dem IE nicht beigebracht, was "wmtt" sein soll.
(Kommst Du da nicht selbst drauf?)

Und was folgern wir daraus messerscharf?
-> Du musst _in Zeile 61_ dem IE erst erklären, dass es ein Objekt namens "wmtt" gibt. Dass Du die Variable wmtt als globale Variable in einer anderen Funktion definiert hast, ist unsauberer Programmierstil. Setze in der Funktion  "showWMTT(id)" bitte ein "var " vor wmtt!
In Zeile 61 musst Du dem IE dann nocheinmal das Objekt per document.getElementbyId() holen, damit er das Style-Objekt darin erreichen kann. Dann sollte auch der Fehler behoben sein.

Ich möchte Dir vorschlagen, in Zukunft die Sache anders anzulegen. Definiere Dein eigenes großes Objekt, dem Du dann Methoden und Eigenschaften gibst. An Deinem Beispiel könnte das so aussehen:

<script type="text/javascript">

var WMTT = { /* diese geschweifte Klammer startet ein Objekt.  
Du könntest alternativ auch schreiben "WMTT = new Object();"  
aber dann müsstest Du im weiteren Verlauf anders weiterschreiben.  
So ist es "einfacher" und übersichtlicher. */  
  
    wmtt : null, /* "wmtt" ohne Anführungszeichen gefolgt von einem Doppelpunkt  
definiert eine Methode oder eine Eigenschaft in diesem Objekt.  
Hier ist es dasselbe wie "WMTT.wmtt = null;". Achte auf das Komma am Ende der  
Zeile! Besonders aufpassen musst Du bei dieser Schreibweise, dass am Ende der  
_letzten_ Methode oder Eigenschaft _kein_ Komma mehr steht, sonst spinnt der IE! */  
  
    show : function (id) {  
        // hier beginnt eine Methode (Funktion) unseres Objektes  
  
        var obj = document.getElementById(id);  
  
        // Objekt (HTML-Element) in einer unserer Eigenschaften abspeichern  
        WMTT.wmtt = obj; // hier verwenden wir unsere eigene Objekt-Eigenschaft!  
  
        // sichtbar schalten  
        obj.style.display = "block";  
    }, // Komma nicht vergessen! Es kommt ja noch was...  
  
    hide : function () {  
        // Wir haben das Objekt ja abgespeichert, nun können wir es _direkt_ benutzen!  
        WMTT.wmtt.style.display = "none";  
  
        // gespeichertes Objekt aus unserer Eigenschaft wieder löschen  
        WMTT.wmtt = null;  
    },  
  
    update : function (e) {  
        // Hier auch wieder schön _lokale_ Variablen (mit "var") definieren!  
        var x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;  
        var y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;  
        if (WMTT.wmtt) {  
            // wenn unser Element den Wert (null|false|-1) hat, dann scheitert die if-Abfrage  
            WMTT.wmtt.style.left = (x - 05) + "px";  
            WMTT.wmtt.style.top  = (y + 20) + "px";  
        }  
    } // KEIN Komma mehr, da unser Objekt fertig ist!!!  
}; // Hier endet die Variablendefinition für WMTT.

</script>

Deine Seite müsste also im Link so aussehen:

<a href="#" onmouseover="WMTT.show('tooltip1')" onmouseout="WMTT.hide()">aaaaaaaaaaaaaaaa</a><br />  
  
<!-- Bitte setze Attributwerte in Anführungszeichen! -->  
<div class="tooltip" id="tooltip1">TEXT</div>

Ausserdem solltest Du IDs und CSS-Klassen mit einem Buchstaben beginnen lassen. In Deinem DIV habe ich das <b> deshalb entfernt, da du Fettschrift ja über CSS einstellen kannst:
#tooltip1 { font-weight: bold; }

Liebe Grüße aus Ellwangen,

Felix Riesterer.