Klickposition ermitteln?

[split.s]

Ich möchte gerne die Klickposition innerhalb eines Block-Elements ermitteln.

Ziel: Ich möchte meinen Usern ermöglichen, in einem Bild (welches als Hintergrundbild des Blocks festgelegt ist) Notizen zu hinterlegen bzw. Personen zu markieren.

Deshalb meine Frage:
Wie kann ich die XY-koordinaten des Klicks in diesem Block-Element ermitteln?
Also nicht die Koordinaten auf dem Bildschirm, sondern in diesem Block-Element!

[Hans]

Hi,

Wie kann ich die XY-koordinaten des Klicks in diesem Block-Element ermitteln?
Also nicht die Koordinaten auf dem Bildschirm, sondern in diesem Block-Element!

Koordinaten vom Blockelement abziehen von Screenkoordinaten.

Hans

[split.s]

Das ist aber recht kompliziert, da die Bilder unterschiedliche Größen haben und auch unterschiedlich positioniert sind!

Ich hatte grad noch die Idee mit einem Image-Submit-Button:
<input type="image" src="bild.jpg" />

Bei einem Submit wird ja auch die XY-Position des Klicks mitgeschickt.
Ist dagegen etwas einzuwenden? Was spricht dagegen es so zu machzen?
Oder ist diese Technik schon veraltet? Es wäre blöd jetzt irgendetwas anzufangen was dann in der nächsten HTML-Version wieder abgeschafft wird.

[Alex]

Hallo,

Ich hatte grad noch die Idee mit einem Image-Submit-Button:
<input type="image" src="bild.jpg" />
Bei einem Submit wird ja auch die XY-Position des Klicks mitgeschickt.

Ja, das funktioniert ganz gut, habe das hier auch so gemacht.

Alex

[split.s]

coole Seite!
Genau so wollte ich das eigentlich auch machen :-)

[Struppi]

Deshalb meine Frage:
Wie kann ich die XY-koordinaten des Klicks in diesem Block-Element ermitteln?
Also nicht die Koordinaten auf dem Bildschirm, sondern in diesem Block-Element!

Bei einem Klick in deinem Dokument kannst du anhand des Eventobjektes ermitteln an welcher Position der Klick erfolgte. Das Eventobjekt enthält darüber hinaus die Information, welches Element angeklickt wurde
var elem = evt.target ? evt.target : evt.srcElement;
davon kannst du dann auch die Position ermitteln.

Struppi.

[split.s]

Sorry, aber das ist mir jetzt doch etwas zu hoch :)

Ich habe bisher mein jQuery-Event so begonnen:

  
$("#bild").click(function () {  
   var position = ???  
   alert("Geklikt wurde bei Position: "+position);  
});  

Ich bin dir dankbar für jeden Link, aber das ist mir alles zu schwammig. Da geht für mich nicht eindeutig hervor, welchen ich nun wirklich benötige und was inwiefern für mich relevant ist.

[split.s]

Ich habe jetzt folgendes versucht:

var posX = e.clientX - this.x
var posY = e.clientY - this.y;

alert("Du hast auf folgende Position im Bild geklickt: "+posX+'x'+posY);

Das funktioniert im Firefox super!
Aber im IE sagt er mir "NaN x NaN" was wohl daher kommt, dass this.x und this.y gleich undefined sind. Scheinbar kennt IE kein this.x und this.y

Zu meinem Problem:
Ich weiss mittlerweile wie ich die Klickposition im Browserfenster herausfinden kann. Um die Klickposition auf dem Bild zu ermitteln muss ich dann nur noch Die Position des Bildes ermitteln und diese dann einfach subtrahieren. Das ist aber leider nicht so einfach, weil die Bilder keinen festen Platz haben sondern die Position von den Usern meiner Community bestimmt wird.