on image click get coordinates?

[CodilX]

Hi,

I can't seem to find a script that can show the position of a click, on an image.

Basicly, what I'm thinking about, is that you have an image, let's say 500px width, 400px height, and you click on that image in the middle, and you get coordinates x and y coordinates, which are 250 and 200.

Does anyone know how to do this?

[penders]

You don't necessarily need any special script if you have your image as a submit button (type="image") on a form. The X and Y values are returned with the form submission - standard browser behaviour.

HTML:

<input type="image" id="myimage" name="myimage" src="img/map.jpg">

myimage.x

and

myimage.y

are returned. However, these are converted to

myimage_x

and

myimage_y

by PHP.

PHP:

echo 'X:'.$_POST["myimage_x"].' Y:'.$_POST["myimage_y"];

[CodilX]

thank you, but I don't get any values :(

<?
if (isset($_POST['submit'])) {
echo 'X:'.$_POST["myimage_x"].' <br>Y:'.$_POST["myimage_y"];

} else {
echo '

<form action="test.php" method="post">

<input type="image" id="myimage" name="myimage" src="midnight.jpg">
<input type="submit" name="submit" class="send" value="get coordinates">

</form>
';

}

?>

[omoutop]

first of all try this:

if (isset($_POST['submit']))
{
echo "<pre>";
print_r($_POST);
echo "</pre>";
}

to check all submitted values.

Second...what penders described, works only if the subjit button is an image. I dont think that this is what you want

[CodilX]

it works fine if the submit button is an image, but I still can't get this to work

[penders]

<input type="image" id="myimage" name="myimage" src="midnight.jpg">
<input type="submit" name="submit" class="send" value="get coordinates">

NB: Clicking on the <input type="image" results in the form being submitted (it is essentially a submit button). The additional submit button is superfluous in this instance. The X/Y coords are only returned if the user clicks the <input type="image".

If you don't want this behaviour, ie. you don't want the form to be submitted when the image is clicked, then I would have thought you will need to use an <img> element, assign an onclick event and get the mouse coords using JS. These could then be assigned to hidden form elements if you need this result passed back to the server.