getting mouse coords onclick relative to image

dannyspencer · 08-04-2006, 10:14 AM

Hi there,

I am trying to create a javascript that will return the coords of where the mouse clicked on an image. I know there are script that will do this sort of thing but they always return the value relative to the whole document (top left of browser screen is 0,0) i would like the coordinates relative to the image (topleft of image is 0,0)

Can anyone help??

Dan

vwphillips · 08-04-2006, 10:47 AM

number of ways

one

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

function zxcEvent(){
 var zxce=window.event||arguments.callee.caller.arguments[0];
 if (typeof zxce.layerX=='undefined') zxce.layerX=zxce.offsetX;
 if (typeof zxce.layerY=='undefined') zxce.layerY=zxce.offsetY;
 alert('Left: '+zxce.layerX+'\nTop: '+zxce.layerY);
 return [zxce.layerX,zxce.layerY];
}


//-->
</script>
</head>

<body>
<div style="position:relative;left:100px;top:100px;width:100px;height:100px;background-color:red;" onmousedown="zxcEvent();" ></div>
</body>

</html>