Übergabe von Mausposition nach Klick auf Image-Input

[Sascha]

Hallo zusammen,

ich habe folgendes Problem, an dem ich mir schon seit Stunden die Zähne ausbeiße :D ...

Ich würde gerne beim Klick auf ein Bild die Position der Maus an eine Java Script Funktion übergeben.

Da ich es mit Java Script bisher nur für den Internet Explorer hinbekommen habe (mit offsetX offsetY... für FF bekomme ich nur die position bezogen auf das gesamte dokument), habe ich es mit nem INPUT feld versucht... das sieht dann so aus:

<form metho="GET" name="albumFrm" onSubmit="albumFotoMausXY()">
  <input id="g_id" name="g_id" type="image" src=bla.jpg>
</form>

die Parameter x=x-position / y=y-position werden wunderbar an die url angehängt...

ABER:

wenn ich den VALUE des INPUTs nun nach submit in nem alert() ausgeben will, bekomme ich nen leeren Wert ausgegeben...

wie fange ich mit Java Script die Werte ab, bevor sie an den Server übergeben werden?

Vielen Dank im Voraus!

Gruß
Sascha

[Manuel B.]

Ich grüsse den Cosmos,

Guckst du hier

Möge das "Self" mit euch sein

[sascha]

cool, vielen Dank für Deine schnelle Antwort! :)

habe das direkt mal ausprobiert!

wenn ich nun auf das bild klicke, wird an die url dieser zusatz angehängt-> ?147,245 (als beispiel)

insgesamt sehen die parameter jetzt so aus->
?f_id=142&g_id=3#?147,245

sorry, wenn ich jetzt so unwissend bin, aber wie bekomme ich jetzt die 2 koordinaten in meine javascript funktion? ;)

danke und gruß
sascha

[Robbe]

hi sascha,

sorry, wenn ich jetzt so unwissend bin, aber wie bekomme ich jetzt die 2 koordinaten in meine javascript funktion? ;)

da ich grad nix zu tun hab, hab ich mal geschaut wie man das machen könnte, mein lösung wäre:

<script type="text/javascript">
function getXY() {
 var url = document.location.href;
 var coords = url.substring(url.indexOf("?")+1, url.length);
 var x = coords.substring(0, coords.indexOf(","));
 var y = coords.substring(coords.indexOf(",")+1, coords.length);

// Dummy-Ausgame
 alert("x: " + x);
 alert("y: " + y);

return new Array(x, y);
}
</script>

<a href="151525.htm" onclick="getXY(); return false;">
 <img src="image.gif" width="150" height="150" ismap alt="Grafik">
</a>

wenn jemand eine elegantere lösung hat würde die mich auch mal intressieren!!

besten gruss,
robbe

[Sascha]

hi robbe,

vielen dank für deine antwort!

das ist schon mal ein guter ansatz!
nur, wenn ich jetzt auf das bild klicke zeigt er mir beim 1. klick eine leere meldung an... beim 2. klick nimmt er die koordinaten, die er beim ersten klick hätte anzeigen sollen.

sprich: er liest die url aus bevor er die koordinaten neu an die url anhängt!

gruß
sascha

[Robbe]

sprich: er liest die url aus bevor er die koordinaten neu an die url anhängt!

hm ok, bei mir geht auch mit nem <a> druchherum (FF, IE) aber das ist eigentlich gar nicht notwendig, wie ich grad feststelle, versuch mal das hier (ohne <a>-tag):

<img src="image.gif" width="150" height="150" ismap alt="Grafik" onclick="getXY(); return false;">

flupped nun?

gruss,
robbe.

[Sascha]

<img src="image.gif" width="150" height="150" ismap alt="Grafik" onclick="getXY(); return false;">

also mit "return false" sendet er mit und ohne <a> tag nix und ohne "return false" / ohne <a> tag auch nicht ^^

also hintergrund der ganzen sache war, dass ich mit

"parameters: $(gruppeFrm).serialize(true)" mit hilfe der prototype.js den value des image inputs per ajax übergeben wollte, damit ich die koordinaten anschließend mit php verarbeiten kann. ohne ajax kann ich mit den koordinaten arbeiten, wenn sie direkt an die php datei übergeben werden.

vielleicht ist mein ansatz auch komplett falsch ^^

[wahsaga]

hi,

also hintergrund der ganzen sache war, dass ich mit
"parameters: $(gruppeFrm).serialize(true)" mit hilfe der prototype.js den value des image inputs per ajax übergeben wollte, damit ich die koordinaten anschließend mit php verarbeiten kann.

Was hast du denn mit den Koordinaten vor.

ohne ajax kann ich mit den koordinaten arbeiten, wenn sie direkt an die php datei übergeben werden.

"Ohne AJAX" heisst, der Browser übernimmt das Abschicken der Formulardaten, und ermittelt dabei auch selber die Klick-Koordinaten.

"Mit AJAX" heisst, du musst dir alle Werte, die übermittelt werden sollen, selber besorgen - also auch die Klick-Koordinaten selber ermitteln.

gruß,
wahsaga

[Sascha]

Was hast du denn mit den Koordinaten vor.

ich möchte die koordinaten für image maps nutzen, die ich mit css aufbereite - um personen auf einem bild zu markieren (so wie bei Studivz). das aufbereiten mit css sieht schon ganz passabel aus. nur das erstellen von neuen markierungen klappt bei mir noch nicht.
ne "fertige" lösung zum dynamischen erstellen von image maps habe ich nirgends gefunden, deswegen probiere ich es nun selber irgendwie...

"Mit AJAX" heisst, du musst dir alle Werte, die übermittelt werden sollen, selber besorgen - also auch die Klick-Koordinaten selber ermitteln.

den Ansatz werde ich auf jeden Fall weiterverfolgen sofern der Firefox dann endlich mal mitspielt ;)

dankeschön!

gruß
sascha

[Robbe]

.. ohne <a> tag nix und ohne "return false" / ohne <a> tag auch nicht ^^

*g* jo vergessen rauszunehmen is nat. überflüssig dann..

also hintergrund der ganzen sache war, dass ich mit
"parameters: $(gruppeFrm).serialize(true)" .. koordinaten anschließend mit php verarbeiten kann.

vielleicht ist mein ansatz auch komplett falsch ^^

ähmn, wieso? müsste doch so gehen, du machst 2 hidden fields für die koordinaten und weisst diese jeweils mit getXY() zu, das serialisieren von prototyp müsste eigentlich auch dynamisch veränderte form-elemente berücksichtigen.

ich finde den ansatz so nicht verkehrt..

[Sascha]

ähmn, wieso? müsste doch so gehen, du machst 2 hidden fields für die koordinaten und weisst diese jeweils mit getXY() zu, das serialisieren von prototyp müsste eigentlich auch dynamisch veränderte form-elemente berücksichtigen.

die Funktion getXY beinhaltet dann wiederum das Ermitteln der Mausposition wie ich es Anfangs beschrieben habe?

ich kann mich schon gar nimmer konzentrieren :D

gruß
sascha

[Robbe]

die Funktion getXY beinhaltet dann wiederum das Ermitteln der Mausposition wie ich es Anfangs beschrieben habe?

ich denke du hast es selbst probiert.. die funktion gibt dir die mauskoord. zurück, an welche der client auf das bild geklickt hat. dabei wird die seite NICHT an den server geschickt!

du musst diese koord. halt noch der form zuordnen am besten vlt. 2 hidden-inputs, wenn du mit prototype.form.serialize anschließend die sachen (inkl. koord.) an den server schicken willst.

ich bin schon kurz davor das auszuprobieren :D

na mal abwarten..

[Sascha]

die Funktion getXY beinhaltet dann wiederum das Ermitteln der Mausposition wie ich es Anfangs beschrieben habe?

ich denke du hast es selbst probiert.. die funktion gibt dir die mauskoord. zurück, an welche der client auf das bild geklickt hat. dabei wird die seite NICHT an den server geschickt!

ja um es noch mal zusammenzufassen:

ich habe zum einen ausprobiert die koordinaten mit "offsetX/-Y" usw. zu ermitteln - nur da hatte ich wie gesagt das problem, dass ich für den FF nur die mausposition bezogen auf die gesamte seite ermitteln konnte...
zum anderen mit <input type="image"> mit einer form - die ließ sich nicht mit prototype serialisieren bzw. ließen sich die parameter auch so nicht mit javascript auswerten.

du musst diese koord. halt noch der form zuordnen am besten vlt. 2 hidden-inputs, wenn du mit prototype.form.serialize anschließend die sachen (inkl. koord.) an den server schicken willst.

ja aber wenn ich die koordinaten nicht via form herausbekommen kann, wieso soll ich die dann - wenn ich sie anders herausbekomme - an hidden inputs übergeben um sie wierum per form zu verschicken?
ich glaub ich muss jetzt erstmal schlafen gehen, ich bin jetzt total verpeilt :D

ich bin schon kurz davor das auszuprobieren :D

jaaaaaa :) das wäre super ;)

[Robbe]

ich bin schon kurz davor das auszuprobieren :D

jaaaaaa :) das wäre super ;)

so jetzt hab ich nochmal nachgeschaut, diese möglichkeit mit dem image-attribute ismap lässt sich doch nur über einen reload realisieren, weiss nicht warum das gestern ohne dieses das <a>-tag noch funktionierte, war wohl der cache..

hab mal mit prototype ein anderen lösungsansatz gebastelt:

<script type="text/javascript">
 Event.observe(window, 'load', trackXY, false);

function trackXY(evt) {
  Event.observe('img', 'click', getXY, false);
 }

function getXY(evt) {
  var el = Event.element(evt);
  var x = (parseInt(Event.pointerX(evt)) - parseInt(el.offsetLeft));
  var y = (parseInt(Event.pointerY(evt)) - parseInt(el.offsetTop));

alert ( "x: " + (parseInt(Event.pointerX(evt)) - parseInt(el.offsetLeft)) );
  alert ( "y: " + (parseInt(Event.pointerY(evt)) - parseInt(el.offsetTop)) );

return new Array(x, y);

}
</script>

<img src="images/image.jpg" id="img" />

im FF und opera 9.02 ließt er die koordinaten korrekt aus, im IE6 jedoch mit jeweils 2px zuviel.. müsste man dann noch ne condition für einbauen (ich hasse sowas eigentlich).

vielleicht hat ja hier noch jemand eine elegantere lösung?

[Sascha]

vielen dank für deine bemühungen :)

ich habe hier nen lösungsansatz, der absolut funktioniert...

http://www.perlinger.de/maus_xy.php

funktioniert mit IE und FF :)

einfach mal auf das bild klicken - in 2 alerts werden x und y ausgegeben!

wenn ich bald mit der der gesamten funktionalität fertig bin (markieren von personen auf nem foto + anschließendes anzeigen der markierungen via css), werde ich hier reinposten!

VIELEN DANK NOCH MAL!!!

gruß
sascha

[wahsaga]

hi,

nur, wenn ich jetzt auf das bild klicke zeigt er mir beim 1. klick eine leere meldung an... beim 2. klick nimmt er die koordinaten, die er beim ersten klick hätte anzeigen sollen.

Natürlich, weil das Formular erst mal abgesendet werden muss, bevor die Koordinaten an den URL angehängt werden.
Deshalb ist diese Methode m.E. relativ untauglich für das, was du vorhast.

Da wäre es sinnvoller, für den IE bei offsetX/-Y zu bleiben, und für den Firefox pageX/-Y zu nehmen, und die Position des Elements selber (offsetLeft/-Top des Elements plus der Werte eventueller offsetParents) wieder abzuziehen, um an Element-relative Klick-Koordinaten zu kommen.

gruß,
wahsaga