How to get clicked point coordinates?

[marss]

Example:
<form action="..." method="post">
<input type=image name="Image1" onclick="beforeSubmit();"
src="..."/>
</form>

When I click on the image the form submitted to the server. As I can
see post data contains next additional values: Image1.x=121 and
Image1.y=64 These values are coordinates of clicked point relative to
image.
Can I get these values in onclick event handler (within the
beforeSubmit method)?

 

[ASM]

marss a écrit :

Example:
<form action="..." method="post">
<input type=image name="Image1" onclick="beforeSubmit();"
src="..."/>
</form>

When I click on the image the form submitted to the server. As I can
see post data contains next additional values: Image1.x=121 and
Image1.y=64 These values are coordinates of clicked point relative to
image.
Can I get these values in onclick event handler (within the
beforeSubmit method)?

yes you can with onmousemove

http://stephane.moriaux.perso.orange.fr/truc/coord_carte

beforeSubmit() will only have to know the last y and x
gotten by the onmousemove

 

[marss]

yes you can with onmousemove

http://stephane.moriaux.perso.orange.fr/truc/coord_carte

beforeSubmit() will only have to know the last y and x
gotten by the onmousemove

Thanks for answer.
It is good example but it is not exactly the same I am looking for.
I have considered this approach before and I found that it not so
simple. Value of layerX(layerY) depends on an image position on the
page and not always returns coordinates relative to the image.
For example, try this in Firefox.
<div style="text-align:center">
<input type=image name="Image1" onclick="beforeSubmit(event);"
src="..."/>
</div>
function beforeSubmit(e)
{
xpos = e.layerX? e.layerX : e.offsetX? e.offsetX : 0;
ypos = e.layerY? e.layerY : e.offsetY? e.offsetY : 0;
alert(xpos + ", " + ypos);
}

But that is not the case. It can be corrected with more complicated
script.

I am interested whether it is possible to retrive values that are
automatically submitted to the server when I click on <input
type="image"> element placed inside a form? This values can be
retrieved on the server side but I can find how to get them on client
side (by means of javascript). Is it possible?

Regards, Mykola

 

[ASM]

marss a écrit :

Thanks for answer.
It is good example but it is not exactly the same I am looking for.
I have considered this approach before and I found that it not so
simple. Value of layerX(layerY) depends on an image position on the
page and not always returns coordinates relative to the image.

I think it does ... if ...

In your example, add :
style="position: relative"
in your input

<div style="text-align:center">
<input type=image name="Image1" onclick="beforeSubmit(event);"

style="position: relative"

src="..."/>
</div>
function beforeSubmit(e)
{
xpos = e.layerX? e.layerX : e.offsetX? e.offsetX : 0;
ypos = e.layerY? e.layerY : e.offsetY? e.offsetY : 0;
alert(xpos + ", " + ypos);
}

But that is not the case. It can be corrected with more complicated
script.

Not too much (with my FF, Safari, IE, ...)

I am interested whether it is possible to retrive values that are
automatically submitted to the server when I click on <input
type="image"> element placed inside a form?

I did not know that these click coordinates are send to the server by
the browser.

find how to get them on client
side (by means of javascript). Is it possible?

I think, try the completed example.

 

[marss]

In your example, add :
style="position: relative"
in your input

That's where the problem lies. Thanks a lot, it is very sensible
suggestion.

I did not know that these click coordinates are send to the server by
the browser.

But they are send. Any analyzer of HTTP requests will show this.
For example, in ASP.Net the specical control exists that utilize this
functionality (ImageButton). Also I can capture these coordinates by
Request.Form["Image1.x"] and Request.Form["Image1.y"] on server side.