nicht angemeldet
Koordinatenermittlung
0 
Gernot Back
Koordinatenermittlung
StruppiHallo.
Bei einem Dokument soll ein div eine Zeichenfläche darstellen. Dieser Bereich kann beliebig im Dokument platziert sein. Die obere Linke Ecke soll den Koordinaten 0,0 entsprechen. Also ergab sich für mich folgender Code (mal etwas zusammengekürzt):
--------------------------------------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="layout/layout.css" />
</head>
<body style="margin:0px;">
<script type="text/javascript">
function testfunction(evt, el) {
if(!evt) {
evt = window.event;
}
var element = document.getElementById(el);
rd = getDim(element);
alert((evt.clientX - rd.x) + " " + (evt.clientY - rd.y));
}
function getDim(el) {
var rd = {x:el.offsetLeft,y:el.offsetTop, x0:0, y0:0}, tEl=el.offsetParent;
while (tEl){
rd.x += tEl.offsetLeft;
if(tEl.offsetLeft == 0) {
rd.x0++;
}
rd.y += tEl.offsetTop;
if(tEl.offsetTop == 0) {
rd.y0++;
}
tEl = tEl.offsetParent;
}
return rd;
}
</script>
<br />
<br />
<fieldset>
<div id="img" style="border:0px" onclick="testfunction(event, 'img')">
<img border="0" src="test.png" width="690" />
</div>
</fieldset>
</body>
</html>
-------------------------------------------------------------------
Firefox, Konquerer und Opera liefern die gewünschten Koordinaten, der Internet Explorer (wie zu erwarten...) jedoch nicht.
Der IE liefert immer 2 Pixel mehr pro nicht div Element.
Will heissen:
Klick bei 14, 43 auf die Grafik bringt bei den 3 anderen 14, 43; beim IE 18, 47. Lässt man das fieldset weg bleiben 16, 45 stehen. Legt man das onclick-event direkt auf die Grafik und lässt den div und die beiden Zeilenumbrüche weg bleiben auch 16, 45.
Hat schonmal jmd ähnliches versucht und weiss woher das kommt bzw. ob es immer 2 Pixel sind. Wie lässt sich das umgehen bzw. zuverlässig korigieren ?
Vielen Dank schonmal.
MfG
-
Hallo DanielH,
Firefox, Konquerer und Opera liefern die gewünschten Koordinaten, der Internet Explorer (wie zu erwarten...) jedoch nicht.
Der IE liefert immer 2 Pixel mehr pro nicht div Element.Vielleicht solltest beim IE lieber mit offsetX und offsetY arbeiten.
Ich komme drauf, weil mir Struppi vor kurzem in einem anderen Anwendungsfall genau das Gegenteil geraten hat:
http://forum.de.selfhtml.org/archiv/2005/12/t120516/#m774054
Da habe ich mich nämlich darüber gewundert, warum mir der IE in der linken oberen Bildschirmecke Koordinaten von (-2 ; -2)ausgab.
Gruß Gernot
-
Moin Gernot,
Ich komme drauf, weil mir Struppi vor kurzem in einem anderen Anwendungsfall genau das Gegenteil geraten hat:
http://forum.de.selfhtml.org/archiv/2005/12/t120516/#m774054
Da habe ich mich nämlich darüber gewundert, warum mir der IE in der linken oberen Bildschirmecke Koordinaten von (-2 ; -2)ausgab.
ich habe schon an mir gezweifelt, denn ich hatte genau dieses Thema im Kopf. Konnte es aber im Archive nicht finden :-(
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
Hallo Mike©,
ich habe schon an mir gezweifelt, denn ich hatte genau dieses Thema im Kopf. Konnte es aber im Archive nicht finden :-(
Da sieht man mal, wozu die Begrüßung und die Verabschiedung in den Postings noch alles gut ist:
Ich habe nämlich auch zuerst so gesucht, wie ich das immer mache: Ich gebe den Namen der beiden Leute ein, die da miteinander korrespondiert haben (in dem Fall also von mir selbst und Struppi) und ein Schlüsselwort (in dem Fall clientX). Nachdem das keinen Erfolg hatte, habe ich mich ausschließlich auf die eigenen Redewendungen meines Ausgangspostings verlassen.
Gruß Gernot
-
Moin Gernot,
Ich habe nämlich auch zuerst so gesucht, wie ich das immer mache: Ich gebe den Namen der beiden Leute ein, die da miteinander korrespondiert haben (in dem Fall also von mir selbst und Struppi) und ein Schlüsselwort (in dem Fall clientX). Nachdem das keinen Erfolg hatte, habe ich mich ausschließlich auf die eigenen Redewendungen meines Ausgangspostings verlassen.
ich wußte um das bewußte Posting, allerdings nicht genau wonach ich suchen sollte da ich aboluter JavaScript "Nichtkönner" bin.
Ich hatte zwar "offsetX und offsetY" gefunden, da ich mir nicht sicher war und lieber gar nix als etwas falsche poste habe ich es dann den "Könnern" überlassen. In diesem Falle Dir.regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
Hallo Mike©,
Ich hatte zwar "offsetX und offsetY" gefunden, da ich mir nicht sicher war und lieber gar nix als etwas falsche poste habe ich es dann den "Könnern" überlassen. In diesem Falle Dir.
Da würde ich mir an deiner Stelle aber mehr zutrauen, "offsetX und offsetY"wäre doch der richtige Tipp gewesen. Selbst wenn es dann nicht ganz 100%ig richtig ist, lenkt das einen Thread vielleicht genau in die richtige Richtung.
Das einzige, was ich letztlich immer weiß ist, wo ich suchen muss und das tut auch Not, denn oft muss ich auch bei den dämlichsten Sachen erst nochmal nachschauen, weil ich sie nicht auswendig kann.
Gruß Gernot
-
Moin Gernot,
Das einzige, was ich letztlich immer weiß ist, wo ich suchen muss und das tut auch Not, denn oft muss ich auch bei den dämlichsten Sachen erst nochmal nachschauen, weil ich sie nicht auswendig kann.
leider habe ich auch bemerkt, dass man der "Cut n Paste" verfallen ist. Kaum hat man eigene Quellcodes nicht präsent, gerät man in's Trudeln oder an's Suchen.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
-
-
-
-
Hi,
Vielleicht solltest beim IE lieber mit offsetX und offsetY arbeiten.
Ich komme drauf, weil mir Struppi vor kurzem in einem anderen Anwendungsfall genau das Gegenteil geraten hat:
Super, Danke ! Das funktioniert. Wollte zwar auf proprietären Code verzichten, aber der IE scheint da ja keine Wahl zu lassen.
MfG
-
Vielleicht solltest beim IE lieber mit offsetX und offsetY arbeiten.
Ich komme drauf, weil mir Struppi vor kurzem in einem anderen Anwendungsfall genau das Gegenteil geraten hat:
Super, Danke ! Das funktioniert. Wollte zwar auf proprietären Code verzichten, aber der IE scheint da ja keine Wahl zu lassen.
Ich vermute mal (hab grad keinen IE 6 da) dass das eher daran liegt, weil du den IE in den Quirksmode schickst (d.h. der Boxmodellbug greift).
Wobei bei meiner Testseite http://jstruebig.de/web/javascript/exp/mouse-test.html sogar der IE 4 (der den Unterschied gar nicht kennt) negative werte für OffsetX/Y anzeigt.
Struppi.
-
Ich vermute mal (hab grad keinen IE 6 da) dass das eher daran liegt, weil du den IE in den Quirksmode schickst (d.h. der Boxmodellbug greift).
Das scheint kein Problem zu sein. Die Seite, auf der das eigentlich zum Einsatz kommt (Eine Art Malprogramm im Browser... Frag nicht warum es war halt eben nötig ;-) ) validiert als strict xhtml 1.0.
Wobei bei meiner Testseite http://jstruebig.de/web/javascript/exp/mouse-test.html sogar der IE 4 (der den Unterschied gar nicht kennt) negative werte für OffsetX/Y anzeigt.
Die verlinkte Seite hilft mir schon sehr gut weiter.
MfG
-
Ich vermute mal (hab grad keinen IE 6 da) dass das eher daran liegt, weil du den IE in den Quirksmode schickst (d.h. der Boxmodellbug greift).
Das scheint kein Problem zu sein. Die Seite, auf der das eigentlich zum Einsatz kommt (Eine Art Malprogramm im Browser... Frag nicht warum es war halt eben nötig ;-) ) validiert als strict xhtml 1.0.
Schon klar, aber valide ist im IE halt nicht unbedingt richtig, der XML Prolog versetzt ihn in den Quirksmodus, der auch für JS einige Grundlegenden Veränderungen hervorruft.
Struppi.
-
Schon klar, aber valide ist im IE halt nicht unbedingt richtig, der XML Prolog versetzt ihn in den Quirksmodus, der auch für JS einige Grundlegenden Veränderungen hervorruft.
Hab ich auch grad gemerkt... Hab dann das ganze nach HTML 4.0 umgeschrieben und dann noch was rum experimentiert.
Also unabhängig von Strict oder Quirks funktioniert die Ermittlung des Abstandes vom Rand eines Elementes (Grafik in dem Fall) nicht wie erwartet.
Mal angenommen ein Fieldset mit padding = margin = 2px und einem Rahmen von 1 px umgibt das Element. Der IE liefert nach der Addition aller offsets 4 anstelle von 5. Man muss also die Rahmen gesondert auslesen und addieren. Ausgehend davon sollte nach einem klick auf die Grafik bei event.offsetX = 14 reell auf event.x = 19 geklickt worden sein (notwendig für die Markierung der Stelle mit einem absolut positionierten div). Event.x liefert jedoch unabhängig von Quirks oder Strict 21 (was ja wiederrum nicht 14 + 5 entspricht). Nimmt man diesen Wert bekommt man eine um 2 Pixel nach unten/rechts verschobene Position.
Wenigstens weiss ich jetzt, wo die 2 Pixel herkommen. Links und Oben gibt es beim IE einen Fensterrand-Schattenwurf-irgendwas-Effekt, welcher genau 2 Pixel breit und nicht nutzbar ist. Blöderweiße wird der jedoch nicht abgezogen.
Das hat jetzt zwar gedauert, aber nun kann ich die Funktion, welche den Abstand ermittelt entsprechend anpassen. Es funktioniert im IE aber auch nur dann, wenn das Fieldset mit einer Rahmenbreite versehen wurde. Bin gespannt auf Version 7 des ganzen...
MfG
-
-
-
-
-