jackiepatti@gmail.com wrote:
Quote:
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. :-)
Quote:
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.
Quote:
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
