473,395 Members | 1,639 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,395 software developers and data experts.

x,y coordinates from an <input type='image'>

QUESTION:
I have a web page containing a form that contains an image instead of a
submit button, e.g.
<form name='myform' action='get' method='otherpage.asp'>
<input type='image' src='picture.gif' name='myimage' id='myimage'>
</form>

When forms with image types are submitted, the value is not returned;
instead, when the form is submitted, the XY coordinates of the where
the user clicked on the image are sent. For example, if the user
clicked on the pixel located at 100, 150, a querystring of this form is
sent:
?myimage.x=100&myimage.y=150

Does anyone know how I can access these variables via JavaScript before
the form is submitted? I have tried everything I can think of and
Googled like crazy and have run out of ideas. I have even tried
submitting the form, extracting the variables, and then cancelling the
submission, but... it seems I just can't get there from here. The form
field does not seem to have any properties whatsoever.

I am testing in IE 6.0 and Mozilla 1.4 on W2K, but am hoping for a
solution as browser-compatible as possible; at a minimum I need IE 5
and up, Mozilla, Firefox and Safari.

CONTEXT:
I am building an art gallery.

This particular page contains an image of a color wheel showing the RGB
color space at brightness = 100%. The user click on the color wheel to
return an x,y value pair, from which I calculate the RGB value in
hexadecimal. I write the RGB value to a hidden form field in a second
form and then write a little DIV with a background set to the chosen
color to show the user.

The user can then change the RGB value by editing another form field
(brightness), from which I recalculate the RGB value, again writing it
to my hidden form field in the second form and as the background to the
little DIV.

Once the user has finished choosing their color via the color wheel and
brightness field, they submit the second form to my site where I
extract the hidden form field to search my database for art containing
that color.

The bit I cannot get to work is that I can't seem to get the x,y value
pair from the <input type=imagefield in the first form on the
client-side.

I cannot implement this via a client-side image map as there are over
40000 individual pixels that would need definition in a <MAPtag and I
have to complete this project within this lifetime. ;) So I prefer to
calculate from the x,y coordinates.

I prefer not to implement it via a server-side image map as the user
may make changes many times before choosing to search and this would
slow the application down a great deal if they had to submit repeatedly
just so I could get the x,y coordinates from a querystring.

I think it may simply not be possible to access the x,y coordinates
from and an <input type='image'on the client-side. Does anyone have
any other ideas about how I can access the coordinates of the image at
the point where the user clicked?

Aug 24 '06 #1
3 21222
ja*********@gmail.com wrote:
QUESTION:
I have a web page containing a form that contains an image instead of a
submit button, e.g.
<form name='myform' action='get' method='otherpage.asp'>
<input type='image' src='picture.gif' name='myimage' id='myimage'>
</form>

When forms with image types are submitted, the value is not returned;
instead, when the form is submitted, the XY coordinates of the where
the user clicked on the image are sent. For example, if the user
clicked on the pixel located at 100, 150, a querystring of this form is
sent:
?myimage.x=100&myimage.y=150

Does anyone know how I can access these variables via JavaScript before
the form is submitted?
Don't use an input type=image. :-)

I have tried everything I can think of and
Googled like crazy and have run out of ideas. I have even tried
submitting the form, extracting the variables, and then cancelling the
submission, but... it seems I just can't get there from here. The form
field does not seem to have any properties whatsoever.
Use a real image element and use the properties of the event object
when it is clicked on to get the click's co-ordinates. Subtract the
co-ordinates of the top left corner of the image to get relative
co-ordinates to calculate the colour and put them in your form. Let
the user post the form with a normal submit button.

I am testing in IE 6.0 and Mozilla 1.4 on W2K, but am hoping for a
solution as browser-compatible as possible; at a minimum I need IE 5
and up, Mozilla, Firefox and Safari.
The sample below has been tested in IE 6 and Firefox 1.0.5. It should
also work in other modern browsers, please test. The example just
writes the image click co-ordinates to a text input, you of course will
convert them to a colour.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Image click co-ords</title>

<script type="text/javascript">

function setClick(e, id)
{
var el = e.target || e.srcElement;

// Get mouse click co-ords
var ePos = {x:0, y:0};
if ('number' == typeof e.pageX){
ePos.x = e.pageX;
ePos.y = e.pageY;
} else if ('number' == typeof e.clientX){
ePos.x = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
ePos.y = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}

// Get image top left co-ords
var elPos = {x:0, y:0};
if (el.offsetParent) {
elPos.x = el.offsetLeft;
elPos.y = el.offsetTop;
while (el = el.offsetParent) {
elPos.x += el.offsetLeft;
elPos.y += el.offsetTop;
}
}

// Write relative position of click to form controls
document.getElementById(id).value =
(ePos.x - elPos.x) + ', ' + (ePos.y - elPos.y);
}
</script>

<form action="">
<table>
<tr>
<th>Colour</th><th>Brighness</th>
</tr><tr>
<td><img src="a.gif" width="100" height="100"
style="border: 1px solid red;"
onclick="setClick(event, 'colourValue');"></td>
<td><img src="a.gif" width="100" height="100"
style="border: 1px solid blue;"
onclick="setClick(event, 'brightValue');"></td>
</tr><tr>
<td><input type="text" id="colourValue" size="5"></td>
<td><input type="text" id="brightValue" size="5"></td>
</tr><tr>
<td><input type="reset"></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
--
Rob

Aug 24 '06 #2
RobG wrote:
The example just writes the image click co-ordinates to a text input,
you of course will convert them to a colour.
No, I will convert them to a color. My husband would convert them to a
colour though. ;)

I had just begun working on something sort of similar to your idea...
but I put the image in an absolutely positioned DIV so I knew what my
offsets are. But that isn't nearly as elegant a solution as your
solution since I hard-coded my offsets in the script, so I shall use
your idea as I like it better than mine.

The different meanings of client.X and client.Y across browsers is
frustrating. There's good info on this topic here:
http://evolt.org/article/Mission_Imp...335/index.html
I *know* the browser has the information I want given that it can pass
it with either an <input type="image"or an <img ismap- it *has* the
information, it's just making me jump through hoops to get it.

Thanks for your help, Rob. I've been stuck trying to figure this out
for hours and hours now. It's nice to have help when pulling an
all-nighter.

Aug 24 '06 #3

ja*********@gmail.com wrote:
RobG wrote:
The example just writes the image click co-ordinates to a text input,
you of course will convert them to a colour.

No, I will convert them to a color. My husband would convert them to a
colour though. ;)
You say tomato, I say tomato...
[...]
The different meanings of client.X and client.Y across browsers is
frustrating. There's good info on this topic here:
http://evolt.org/article/Mission_Imp...335/index.html
That article was written by Peter-Paul Koch in 2002. The position
stuff in the script I posted came (mostly) from his web site, which I
think is much more up to date - particularly in regard to browser
sniffing.

<URL: http://www.quirksmode.org/ >

Element position:
<URL: http://www.quirksmode.org/js/findpos.html >

Click position:
<URL: http://www.quirksmode.org/js/events_properties.html >
--
Rob

Aug 24 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Csaba2000 | last post by:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would...
15
by: Mattia | last post by:
Hi! I have a <form> that can be submitted thruogh three buttons and I need to tell witch one was pressed when the form was submitted. I now do it with 3 <input type="submit" name="..."...
3
by: Csaba Gabor | last post by:
When I click on the image form element <INPUT type=image name=point src="map.png"> point.x and point.y values get submitted to the server specifying where on the image I have clicked. Is there...
2
by: not 2 swift | last post by:
I thought I would update an old page on which I had used a <INPUT TYPE=image ...> with a <BUTTON><IMG SRC=...></BUTTON> The problem is that <BUTTON> always provides a shadow/emboss effect. Can...
4
by: Robert | last post by:
Hi! I'm reading in the html spec that the INPUT element can have a "ismap" or a "usemap" attribute, and thus that an image map can be associated with a form. I've searched but didn't find any...
2
by: Kimmo R. M. Hovi | last post by:
Currently I have defined: -- clip clip -- <form method="post" action="xx" enctype="application/x-www-form-urlencoded"> <input type="image" name="Function 1" src="image1.gif" border="0"...
17
by: Alan Silver | last post by:
Hello, I have a page which I am converting to use themes. The page has an HTML <input type="image"> element that is used to post to another page. I would like to replace this with a server...
2
by: Alan Silver | last post by:
Hello, If I have the following HTML... <input type="image" src="fred.gif"> .... is there a way to specify the image in CSS rather than in the HTML? TIA
2
by: wolfing1 | last post by:
So far I've been using instructions like 'if request.form("var.x") <> "" then ...' but then I found that if images are disabled (or not found) and I click on the alt text, then Firefox (or was it...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
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: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
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
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
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...

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.