Mouse click location on image
<p>What I am trying to do should be easy for a Js guy, but I am just a php guy (just a starter.). I need this for a project that I am doing now.</p>

<p>What I am trying to do is, get the click co-ordinates over the image and post it to a php script so that I can get the values and do the rest of the processing. (I dont know ajax, so this is the only way I can do that I suppose).</p>

<p>I found a code, but this shows the X and Y points as many times as I need. I want it to work just for one time.</p>

<pre><code>    &lt;script type="text/javascript"&gt;
&lt;!--

function FindPosition(oElement)
{
if(typeof( oElement.offsetParent ) != "undefined")
{
for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [ posX, posY ];
}
else
{
return [ oElement.x, oElement.y ];
}
}

function GetCoordinates(e)
{
var PosX = 0;
var PosY = 0;
var ImgPos;
ImgPos = FindPosition(myImg);
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
PosX = e.pageX;
PosY = e.pageY;
}
else if (e.clientX || e.clientY)
{
PosX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
PosY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
PosX = PosX - ImgPos[0];
PosY = PosY - ImgPos[1];
document.getElementById("x").innerHTML = PosX;
document.getElementById("y").innerHTML = PosY;
}

//--&gt;
&lt;/script&gt;
&lt;img src="newapp.jpg" alt="" id="myImgId" height="300" width="400"&gt;&lt;p&gt;Click on the image to get the coordinates.&lt;/p&gt;


&lt;script type="text/javascript"&gt;
&lt;!--
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
//--&gt;
&lt;/script&gt;
</code></pre>
