onMouseOver DIV anzeigen

[hacker676]

hi,
ich hab so ein kleines problem mit nem JavaScript, 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.
der muss da weg aber ich bekomme den leider nicht weg.

die seite findet ihr hier: http://mitglied.lycos.de/lightg2k/1.htm

da das ein kostenloser webspace ist, ist am anfag und am ende werbung.
meine quelltet ist zwischen <!------ homepage anfang ----> und <!------ homepage ende ----->

wäre gut wenn ihr da was wüsstet.

MfG
hacker676

[wahsaga]

hi,

[...] das funzt auch aber es wird beim IE in der statusleiste ein fehler angezeit.

Und was dir bereits vorgeschlagen wurde hast du versucht umzusetzen?
Woran scheitert's?

gruß,
wahsaga

[hacker676]

hi wahsaga,

Und was dir bereits vorgeschlagen wurde hast du versucht umzusetzen?
Woran scheitert's?

ich habs versucht aber ich weiß nicht als was ich wmtt definieren soll.
ich weiß das ich es so var wmtt="" definieren muss aber was in die "" soll weiß ich nicht, hab schon ein par sachen versucht.

MfG
hacker676

[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.

[Hacker676]

Cool,

vielen, vielen dank!!!

hab wieder was gelehrnt.
klappt, jetz muss ich das alles mal durch büffeln =)

danke nochmal!

MfG
Hacker676

[Felix Riesterer]

Lieber Hacker676,

um Mauskoordinaten zuverlässig zu erhalten, habe ich mir "in Zusammenarbeit mit diesem Forum" folgende Funktion für meinen Mausverfolger geschrieben:

 verfolgeKoordinaten : function (ereignis) {  
  var pos, IE;  
  
  if (!ereignis) ereignis = window.event;  
  
  pos = { left : ereignis.clientX, top : ereignis.clientY };  
  
  IE = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?  
   window.document.documentElement : window.document.body || null;  
  
  if (IE) {  
   pos.left += IE.scrollLeft;  
   pos.top +=  IE.scrollTop;  
  }  
  
  Mausverfolger.div.style.left = pos.left + Mausverfolger.dx + "px";  
  Mausverfolger.div.style.top = pos.top + Mausverfolger.dy + "px";  
 }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Hacker676]

Lieber Hacker676,

um Mauskoordinaten zuverlässig zu erhalten, habe ich mir "in Zusammenarbeit mit diesem Forum" folgende Funktion für meinen Mausverfolger geschrieben:

Vielen Dank!
Ein Freund hat mir bei dem überarbeiten des Scripts geholfen und folgendes ist dabei raus gekommen:

 wmtt = null;  
  
document.onmousemove = updateWMTT;  
  
function updateWMTT(e) {  
 x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;  
 y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;  
 if (wmtt != null) {  
  wmtt.style.left = (x - 05) + "px";  
  wmtt.style.top  = (y + 20) + "px";  
 }  
}  
  
function showWMTT(id) {  
 wmtt = document.getElementById(id);  
 wmtt.style.display = "block"  
}  
  
function hideWMTT() {  
 wmtt.style.display = "none";  
}  

Ich bedanke mich nochmal bei allen die mir bei dem Script geholfen haben.

MfG
hacker676

[Felix Riesterer]

Lieber Hacker676,

Ein Freund hat mir bei dem überarbeiten des Scripts geholfen und folgendes ist dabei raus gekommen:

Dein Code ist nicht gut! Es mag zwar für den Augenblick reichen, aber wenn Du komplexere Sachen vorhast (z.B. AJAX), dann solltest Du auf die von mir vorgeführte Art und Weise umsteigen. Es lohnt sich! Ich habe es am eigenen Leibe erfahren müssen!

Liebe Grüße aus Ellwangen,

Felix Riesterer.