OffsetX, OffsetY und das Elternelement

[Stefan Link]

Hallo community,

folgendes Problem:

<div style="positon:absolute;width:50px;height:30px" onclick="give_coords()">
  <table>
    <tr>
      <td style="width:10px;height:10px">Schöner Inhalt</td>
      <td style="width:10px;height:10px">Schöner Inhalt</td>
      <td style="width:10px;height:10px">Schöner Inhalt</td>
    </tr>
  </table>
</div>

Die Funktion give_coords spuckt mit offsetX und offsetY die Koordinaten des Mausklicks aus. Problem ist, dass sich die Koordinaten immer auf die Tabellenzellen beziehen, das heißt ich bekomme x/y - Werte zwischen 0 und 9 hätte aber gerne die Werte bezogen auf das Elternelement <div>. Sieht jemand, was ich da falsch mache? (Ich teste mit offset beim IE und Layer bei den Moz.)

Danke und Gruß
Stefan

[Struppi]

Die Funktion give_coords spuckt mit offsetX und offsetY die Koordinaten des Mausklicks aus. Problem ist, dass sich die Koordinaten immer auf die Tabellenzellen beziehen, das heißt ich bekomme x/y - Werte zwischen 0 und 9 hätte aber gerne die Werte bezogen auf das Elternelement <div>. Sieht jemand, was ich da falsch mache? (Ich teste mit offset beim IE und Layer bei den Moz.)

such dir aus was du brauchst: http://javascript.jstruebig.de/exp/mouse-test.html

Struppi.

[Stefan Link]

Hi Struppi,

danke die Seite kenn ich schon hat mir bisher viel geholfen :) Aber ich finde auch da keine Lösung. Das Problem ist, das bei einem normalen absolutem Div das immer passt, aber bastle ich da mal ne Tabelle rein ist Feierabend, dann bezieht der IE das auf die Tabellenzellen :(.

Gruß
Stefan

[Struppi]

danke die Seite kenn ich schon hat mir bisher viel geholfen :) Aber ich finde auch da keine Lösung. Das Problem ist, das bei einem normalen absolutem Div das immer passt, aber bastle ich da mal ne Tabelle rein ist Feierabend, dann bezieht der IE das auf die Tabellenzellen :(.

Ich hab das mal ausprobiert, bei mir gibt's mit der funktion keine Probleme:
function mouse_pos(evt)
{
    if(!evt) evt = window.event;
    var pos = new Object();

pos.left = evt.clientX;
    pos.top = evt.clientY;

var b = getBody(window)

if (b) {
        pos.scrollLeft= pos.left + b.scrollLeft;
        pos.scrollTop = pos.top + b.scrollTop;
    }
    else if(document.layers)
    {
        // Netscape 4.
        pos.scrollLeft = evt.pageX;
        pos.scrollTop = evt.pageY;
        pos.left = evt.pageX - window.pageXOffset;
        pos.top = evt.pageY - window.pageYOffset;

}
    return pos;
}

////////////////////////////////////////////////////////////
// Der IE hat 2 verschiedene Objekte für den strict und quirks Mode.
function getBody(w)
{
    return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ?
    w.document.documentElement : w.document.body || null;
}

Aufruf natürlich so:

onclick="give_coords(event)"

Struppi.

[Stefan Link]

Ich habe jetzt einfach mal frech deine Funktionen kopiert und das geht wirklich. Ich kapier zwar noch nicht ganz warum es bei mir nicht ging, aber was solls :-) -> Vielen Dank!!! Eine Frage noch: ich habe hier mal ein schlampiges Beispiel:

http://212.185.206.49/test.html

Dem Div gebe ich ein top und ein left von jeweis 20px mit. Die rechnen sich in die Position mit ein, right?

[Struppi]

http://212.185.206.49/test.html

Das läuft nur im IE.

Dem Div gebe ich ein top und ein left von jeweis 20px mit. Die rechnen sich in die Position mit ein, right?

Ich denke schon.

Struppi.