By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,934 Members | 1,476 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,934 IT Pros & Developers. It's quick & easy.

How to get clicked point coordinates?

P: n/a
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)?

Jun 25 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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...uc/coord_carte

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

--
Stephane Moriaux et son (moins) vieux Mac
Stephane Moriaux and his (less) old Mac already out of date
Jun 25 '07 #2

P: n/a

ASM wrote:
yes you can with onmousemove

http://stephane.moriaux.perso.orange...uc/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

Jun 25 '07 #3

P: n/a
ASM
marss a écrit :
ASM wrote:
>yes you can with onmousemove

http://stephane.moriaux.perso.orange...uc/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.
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.

--
Stephane Moriaux et son (moins) vieux Mac
Stephane Moriaux and his (less) old Mac already out of date
Jun 25 '07 #4

P: n/a

ASM wrote:
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.

Jun 26 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.