brauche pixel (x/y) eines bildes auf das der user klickt

[bernhard]

hallo,

ich würde gerne wissen wie es möglich ist, festzustellen auf welches pixel eines images der user geklickt hat.

so in der richtung:
<img src="..." onclick="alert(this.x+'-'+this.y)">

das bild soll NICHT verlinkt sein (keine imagemap), ich brauche auf der aktuellen seiten also nur die x/y koordinaten. das ganze soll die relativen koordinaten des Bildes, nicht des ganzen windows liefern. ich hab dazu in selfhtml nichts gefunden.

http://selfhtml.teamone.de/javascript/objekte/event.htm#layer_x_y bringt mich leider auch nicht weiter.

funktionieren soll das ganze v.a. in netscape.

danke & tia
bernhard

[Chräcker Heller]

Hallo,

ich würde versuchen herauszufinden, an welcher Position das image erscheint und davon die Mauskoordinaten abziehen.

Chräcker

[bernhard]

und wie lese ich die relative position des bildes im window aus?

posx = document.getElementsByTagName("img")[0].style.left;
      posy = document.getElementsByTagName("img")[0].style.top;
      alert (posx + " - " + posy);

so klappts nicht bei mir. ergebnis: ' - ' (mit mozilla 1.6)

lg bernhard

[molily]

Hallo,

und wie lese ich die relative position des bildes im window aus?

Mit offsetTop http://selfhtml.teamone.de/javascript/objekte/all.htm#offset_top und offsetLeft http://selfhtml.teamone.de/javascript/objekte/all.htm#offset_left.

<img src="..." name="bild">
document.images['bild'].offsetLeft bzw. document.images['bild'].offsetTop

Wie du Mauskoordinaten abfragst, findest du auf http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/, unten in den Kommentaren.

Kombiniert könnte das etwa so aussehen:

function klickkoordinaten (e) {
 posx=0; posy=0;
 if (!e) var e=window.event;
 if (e.pageX && e.pageY) {
  posx=e.pageX;
  posy=e.pageY;
 } else
   if (e.clientX && e.clientY) {
   posx=e.clientX+document.body.scrollLeft;
   posy=e.clientY+document.body.scrollTop;
  }
 bildposx=0; bildposy=0;
 if ( typeof(document.images['bild'].offsetLeft)=='number' && typeof(document.images['bild'].offsetTop)=='number' ) {
  bildposx=document.images['bild'].offsetLeft;
  bildposy=document.images['bild'].offsetTop;
  if ( bildposx>0 && bildposy>0 ) {
   diffx=posx-bildposx;
   diffy=posy-bildposy;
   window.alert(posx+' / '+posy+'\n'+bildposx+' / '+bildposy+'\n'+diffx+' / '+diffy);
   // diffx und diffy sollten die gesuchten Werte enthalten

}
 }
}
window.onload=function () {
 document.images['bild'].onclick=klickkoordinaten;
}

<img src="..." name="bild">

Im MSIE 6 im standardkonformen Rendermodus muss das body-Element margin:0 haben, damit scrollLeft und scrollTop die richtigen Werte liefern. Die abstände lassen sich problemlos über padding realisieren.

Opera 5 und 6 liefern 0 für document.images['bild'].offsetTop 0, aber würde für das Blockelement darüber über getElementById den richtigen offsetTop-Wert liefern, sofern das Bild sich direkt an dessen obere Kante anschließt.

Im Netscape 4 sollte es prinzipiell auch gehen, wenn das Bild position:relative hat und es über document.layers[0] angesprochen wird. Die Mauskoordinaten sind dann über event.x und event.y auslesbar, die Bildposition über event.target.x und event.target.y. Der Event wird mit document.layers[0].captureEvents(Event.CLICK); aktivierbar, wobei ich es nur mit onmousemove nachvollziehen konnte, der Klick löst komischerweise nicht den Event aus. Da müsstest du herumprobieren.

Mathias

[bernhard]

ein riesengrosses danke! ich bin in javascript zwar nicht gerade unbegabt, aber diese dhtml sachen (v.a. zusammen mit css: positionierung) waren mir schon immer ein bisschen zu heftig ;-)

danke für eure hilfe!

lg bernhard

[wahsaga]

hi,

ich würde gerne wissen wie es möglich ist, festzustellen auf welches pixel eines images der user geklickt hat.

brauchst du das auf der selben seite, oder genügt es auch, dies auf der folgeseite zu wissen (die ja auch die selbe ressource sein kann)?

dann würde ich nämlich vorschlagen, dass bild als image-button in ein formular mit method="GET" einzubinden, dann bekommst du die koordinaten ja automatisch im aufgerufenen URL übermittelt, und könntest sie dort auslesen (serverseitig sehr leicht, clientseitig dann halt mit JS den query string parsen).

gruss,
wahsaga

[bernhard]

hallo

danke für diesen tip!

brauchst du das auf der selben seite, oder genügt es auch, dies auf der folgeseite zu wissen (die ja auch die selbe ressource sein kann)?

nun, es handelt sich um eine etwas kompliziertere angelegenheit. das image ist resultat einer web-service abfrage (stadtplan), bei einem klick auf die karte soll eine zweite operation des Web Service ausgeführt werden (information zu dem pixel auf das der user klickt). das heisst also die x/y koordinaten werden im endeffekt dann eh an den server geschickt.

eigentlich ist es daher egal. ich muss es im endeffekt dann sowieso an den server schicken. vorerst - im ersten prototyp - ist es der übersichtlichkeit halber so, dass die koordinaten bei klick auf die karte in ein formularfeld geschrieben werden (das man händisch auch ändern kann). diese beiden formularfelder (posX/posY) werden zusammen mit weiteren formularfelder-werten dann mit POST an ein Servlet übergeben (welches die kommunkation mit dem Web-Service steuert). das könnte man allerdings auch umschreiben (wär im sinne der applikation vielleicht sogar besser bzw. 'richtiger') dazu müsste ich allerdings wissen ...

dann würde ich nämlich vorschlagen, dass bild als image-button in ein formular mit method="GET" einzubinden, dann bekommst du die koordinaten ja automatisch im aufgerufenen URL übermittelt, und könntest sie dort auslesen (serverseitig sehr leicht, clientseitig dann halt mit JS den query string parsen).

.... wie man diese koordinaten am server ausliest - wie gesagt, es handelt sich um java servlets. ich meine zwar es sollte damit eigenltich nicht viel zu tun haben, solange ich weiss wie der http-parameter heisst (oder sind da browser-inkompatibilitäten zu erwarten?) ich hab nämlich mal irgendwo gelesen, dass diese koordinaten automatisch bim submit eines formulars (egal ob mit GET oder POST?!?) mitübergeben werden.

was meinst du mit string am client parsen? die koordinaten sind am client nur jetzt im ersten prototypen wichtig, denn der musste jetzt ziemlich flott fertig werden (ausserdem war es in den anforderungen so spezifiziert ;-), aber in späterer folge soll der client wahrscheinlich eh dumm sterben (d.h. er muss die koordinaten eigentlich nicht wissen)

lg bernhard

[wahsaga]

hi,

dazu müsste ich allerdings wissen ...
.... wie man diese koordinaten am server ausliest - wie gesagt, es handelt sich um java servlets.

mit java serlevts kenne ich mich nicht aus.

soweit ich weiss sollten die koordinaten aber immer als buttonname.x und buttonname.y übergeben werden.

gruss,
wahsaga