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

[jackiepatti]

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=image> field 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 <MAP> tag 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?

 

[RobG]

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>

 

[jackiepatti]

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_Impossible_mouse_position/17/23335/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.

 

[ozfred]

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_Impossible_mouse_position/17/23335/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 >