✔ Mouseposition wird falsch ermittelt wenn der Scrollbalken nicht ganz oben steht

LoMo

LoMo

Erfahrenes Mitglied
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: 
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: 
<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: 
                 <div id="Bayern" class="tooltip">
	  <?
		$Bundesland = "Bayern";
		Info("Bayern");
	?>
	</div>


please help :D


mfg Lomo
 
Zuletzt bearbeitet:
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: 
window.document.body
im Standardmode dagegen über
Code: 
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: 
// 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 + ieBody.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + ieBody.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: 
<body onload="init();">
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück