473,398 Members | 2,343 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,398 software developers and data experts.

How to get clicked point coordinates?

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
4 6055
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

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
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

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: optimistx | last post by:
When we click an image, we get the coordinates x and y in the event handler, like this <script type="text/javascript"> function fun2(evnt){ var e=evnt; if (e==undefined){e=event;} var x=e.x...
1
by: Hul Tytus | last post by:
comp.lang.c converting a point known by 4 distances to xyz coordinates? Amongst all the librarys on the internet there is certainly source for a routine that converts a point known by 4...
65
by: Skybuck Flying | last post by:
Hi, I needed a method to determine if a point was on a line segment in 2D. So I googled for some help and so far I have evaluated two methods. The first method was only a formula, the second...
2
by: Peter Steele | last post by:
I have a form containing a ListView with four columns, creating a multi-cell table. I want to have an event which can determine which cell in the table is under the cursor when a double-click is...
4
by: Hylton | last post by:
Hi In a treeview How do I get the node that the user right clicked on. I need to modify the contecxt menu based on the node
6
by: Martin Heuckeroth | last post by:
Hi, We are looking for a way to determine the x and y points of the cursor in a richtext box. We made an VB.NET application with a couple of listboxes and one of them is a richtextlistbox....
0
by: kusuma chalasani | last post by:
hii.. i have a problem with mouse clicked. i have an applet with some images drawn on it and in that i have inserted one textarea. if i doubleclick on the textarea the text which is there in...
1
by: Andrew Poulos | last post by:
I have a image in a scrollable DIV. The image is bigger than the display size of the DIV. How do I get the coordinates of a mouse click on the image relative to the top left corner of the image...
2
by: PythonNotSoGuru | last post by:
Hi all first time posting in a while sry if i mess something up. Anyway I am using 2d arrays to make a game with pygame and i alter coordinates on this array by smaller than 1 increments. Then i need...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.