Hi @ all,

ich habe wieder mal ein rießen Problem und zwar hab ich ein kleines script, dass Tooltips anzeigt wenn man über einen Hotspot (area) fährt. Funktioniert alles auch einman frei. ABER wennn die Hotspots (in meinen Fall ist es eine Landkarte). Größer wie eine Seite ist und man scrollt nach unten dann wird die mouseposition irgendwie falsch ermittelt und der Tooltip geht von der mouse aus immer mehr nach oben je weiter man runterscrollt wenn man über den Hotspot (area) fährt.

Weiss jemand wie man des abfangen kann, oder dass immer die richtige mouseposition berechnet wird trotz scrollen ? Ich bin über jeglichen Lösungsvorschlag froh.


Tooltip Script:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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 + 20) + "px";         wmtt.style.top = (y + 20) + "px";     } }   function showWMTT(id) {     wmtt = document.getElementById(id);     wmtt.style.display = "block" }   function hideWMTT() {     wmtt.style.display = "none"; }

Hier ein Hotspot:

HTML-Code:

<area shape="poly" coords="130,394,139,396,150,407,157,407,158,399,164,399,176,401,187,404,197,399,199,395,221,394,221,387,230,388,237,390,243,398,250,398,252,390,247,385,247,379,240,365,245,363,260,350,263,340,275,338,275,328,260,318,249,308,244,302,237,301,224,279,227,267,214,264,211,250,201,246,192,246,189,243,185,248,181,252,176,250,170,248,169,254,164,257,148,243,140,244,135,247,132,251,127,255,127,261,120,262,115,260,110,267,113,279,112,287,119,285,119,280,131,279,133,285,140,290,144,292,145,301,151,314,154,319,159,328,157,336,153,337,156,343,146,349,148,360,148,371,146,378,149,389" href="Karte_Bayern.php?suchoption=<? echo $_GET['suchoption'];?>&feldinhalt=<? echo $_GET['feldinhalt'];?>&Bundesland=Bayern" onMouseOver="showWMTT('Bayern')" onMouseOut="hideWMTT()">

Hier der Tooltip dazu:

PHP-Code:

                 <div id="Bayern" class="tooltip">
      <?
        $Bundesland = "Bayern";
        Info("Bayern");
    ?>
    </div>

please help


mfg Lomo

In welchem Browser?
Welchen DOCTYPE hast du angegeben(falls vorhanden)

Hi,

ich gehe einfach mal davon aus, dass das beschriebene Problem nur im IE auftritt.

Beim Ermitteln des body-Objekts muss im IE der aktuell gewählte Modus (Quirks- bzw. Standardmode)
beachtet werden. Im Quirksmode erfolgt das über

Code :

1	window.document.body

im Standardmode dagegen über

Code :

1	window.document.documentElement

Mehr Infos findest du hier.

Zum Ermitteln des jeweils aktuellen Modus existiert die JavaScript-Methode compatMode.

Mit folgender Anpassung sollte das richtige Objekt gewählt werden.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

// Browserweiche IE = document.all&&!window.opera;   /* Body-Objekt des IE ermitteln (abhängig, ob IE im Quirks- oder Standardmode*/ function getBody(){   // Entsprechendes Bodyobjekt zurückgeben (CSS1Compat = Standardmode)   return (window.document.compatMode == "CSS1Compat") ?           window.document.documentElement : window.document.body || null; }   var ieBody = null;   // Funktion zum Initialisierung, die in onload aufgerufen wird function init(){   // Falls es sich um einen IE handelt   if(IE)     ieBody = getBody(); // Bodyobjekt für IE ermitteln }   wmtt = null;   document.onmousemove = updateWMTT;   function updateWMTT(e) {     x = (document.all) ? window.event.x + [B]ieBody[/B].scrollLeft : e.pageX;     y = (document.all) ? window.event.y + [B]ieBody[/B].scrollTop  : e.pageY;       if (wmtt != null)     {         wmtt.style.left = (x + 20) + "px";         wmtt.style.top = (y + 20) + "px";     } }   function showWMTT(id) {     wmtt = document.getElementById(id);     wmtt.style.display = "block" }   function hideWMTT() {     wmtt.style.display = "none"; }

Um das richtige body-Objekt zu initialisieren, wird die init-Funktion im onload-Event des Bodys
aufgerufen.

HTML-Code:

<body onload="init();">

Ciao
Quaese

Funktioniert mit deinen Vorschlag optimal. Vielen vielen Dank