Mauskoordinaten

[Manuel]

Hallo,

ich möchte mit Hilfe von JavaScript beim Überfahren einer Grafik einen Tooltip anzeigen lassen.

Klappt mit IE.
Klappt nicht mit FireFox.

Habe versucht, dieses Beispiel:
http://de.selfhtml.org/javascript/objekte/event.htm#client_x_y
umzubauen, so daß die Funktionen nicht Dokument-weit reagiert, sondern nur in Bezug auf einen Event-Handler innerhalb des Img-Tags.

<img onMouseMove="TooltipMove();" src="..." alt="..." width="100" height="100">

die Funktion dazu:

oTooltipBox = window.document.getElementById('TooltipBox');

function TooltipMove() {
    oTooltipBox.style.left = window.event.clientX + window.document.body.scrollLeft;
    oTooltipBox.style.top = window.event.clientY + window.document.body.scrollTop;

Ich verstehe das mit dem "Ereignis" in dem Beispiel nicht so ganz.

Vielen Dank für die Hilfe

[wahsaga]

hi,

Ich verstehe das mit dem "Ereignis" in dem Beispiel nicht so ganz.

mozilla/firefox übergibt beim aufruf über einen eventhandler automatisch das ereignis an die funktion - deshalb steht das event dann schon im parameter Ereignis zur verfügung.

der IE tut dies aber nicht, also muss man dort erst dafür sorgen, dass Ereignis einen wert zugewiesen bekommt - dies macht die direkt am anfang stehende if-abfrage.

danach hat man in beiden browsertypen das gleiche in Ereignis stehen - eine referenz auf das auslösende event, und kann damit weiterarbeiten.

mach es einfach analog zum beispiel.
die if-abfrage auf document.all und folgenden anweisungszweig kannst du dir aber eigentlich sparen, denn auch der IE ab version 5 versteht getElementById.

gruß,
wahsaga

[Manuel]

Hallo nochmal,

ich wollte außerdem wissen, wie ich die Funktion abändern müsste, damit sie nicht Dokument-weit reagiert, sondern nur beim Aufruf über einen Event-Handler in z. B. einem Img-Tag.

[Struppi]

http://de.selfhtml.org/javascript/objekte/event.htm#client_x_y
umzubauen, so daß die Funktionen nicht Dokument-weit reagiert, sondern nur in Bezug auf einen Event-Handler innerhalb des Img-Tags.

Da gibt es einige Probleme, die auch in selfhtml noch nicht beschrieben sind. Um in MZ Browsern den event bei HTML Objekten zu übergeben existiert das Objekt 'event'

Die Browser haben je nach Modus unterschiedliche body Elemente. D.h. du musst testen ob das Dokument im Standard oder Quirks Modus ist.

Ausserdem verlangen alle Größenangaben im style Einheiten, Immer!

Das Skript könnte also so aussehen;

  
<script type="text/javascript">  
var oTooltipBox ;  
  
function TooltipMove(e)  
{  
if(!oTooltipBox)  
 oTooltipBox = window.document.getElementById('TooltipBox');  
if(!oTooltipBox)  
 return alert('Fehler!\nTolltipBox nicht gefunden');  
  
if(!e) e = window.event;  
  
  
oTooltipBox.style.display='block';  
oTooltipBox.style.left = ( e.clientX  + getBody(window).scrollLeft) + 'px';  
oTooltipBox.style.top = ( e.clientY  + getBody(window).scrollTop) + 'px';  
}  
function getBody(w)  
{  
    return w.document.body;  
    return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ?  
    w.document.documentElement : w.document.body || null;  
}  
</script>  

Das HTML:

<img onmousemove="TooltipMove(event);" onmouseout="if(oTooltipBox)oTooltipBox.style.display='none';" src="test.jpg">

Struppi.

[Manuel]

function getBody(w)
{
    return w.document.body;
    return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ?
    w.document.documentElement : w.document.body || null;
}

Hallo.

Vielen Dank, das funktioniert super!

ich hoffe, es ist nicht zu viel verlangt, aber könntest Du mir bitte nochmal die Funktion getBody(w) erklären?
Schließlich möcht ichs ja gerne verstehen und nicht nur kopieren.

Vielen Dank nochmal!

[Struppi]

function getBody(w)
{
    return w.document.body;
    return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ?
    w.document.documentElement : w.document.body || null;
}

ich hoffe, es ist nicht zu viel verlangt, aber könntest Du mir bitte nochmal die Funktion getBody(w) erklären?

Schließlich möcht ichs ja gerne verstehen und nicht nur kopieren.

Warum es so ist weiß ich nicht, die scroll Werte werden je nachdem, ob die Seite im Standard oder Quirksmodus gerendert werden gesetzt.
Etwas mehr dazu hier: http://www.quirksmode.org/viewport/compatibility.html

Struppi.