look on this page, about halfway down, at the screenX and screenY properties. This is just a quick guess - I find javascript such a pain that I avoid it when possible, but when I do need it, the reference I linked to is indispensible.
I just went through this, as I've recently been working with JS and now DOM. I am sure there is better, but I wrote a little lib to track the x and y of the users mouse. Seems to work in ns6, moz1, and ie6, but not tested beyond that.
<!--
var
isNetscape=false;
var cx=0;
var cy=0;
function xpos() {
return cx;
}
function ypos() {
return cy;
}
function xy(x,y) {
cx = isNetscape ? x : window.event.x;
cy= isNetscape ? y : window.event.y;
window.status=cx+":"+cy;
}
if (navigator.appName=="Netscape") {
isNetscape=true;
document.captureEvents(Event.MOUSEMOVE);
}
-->
oops! you have to have onmousemove="xy(event.pageX,event.pageY);" in the <body> tag of your html doc. I am trying to find a way to avoid that, as I want the lib to be more stand alone. Any advice on that would be helpful (and document.onmousemove=xy in the script doesn't count! heh) .
did you try the screenX and screenY properties too? they seemed right, but one of the problems with javascript is that each browser interperets the 'screen' differently - some include the nav bar, some don't, some include the scrollbar, some don't, so I don't think you're ever going to find an exact solution. Oh well, enough tangent for the morning.
<script language="javascript">
function BrowserCheck() {
var b = navigator.appName
if (b=="Netscape") this.b = "ns"
else if (b=="Microsoft Internet Explorer") this.b = "ie"
else this.b = b
this.v = parseInt(navigator.appVersion)
this.ns = (this.b=="ns" && this.v>=4)
this.ns4 = (this.b=="ns" && this.v==4)
this.ns5 = (this.b=="ns" && this.v==5)
this.ie = (this.b=="ie" && this.v>=4)
this.ie4 = (navigator.userAgent.indexOf('MSIE 4')>0)
this.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0)
if (this.ie5) this.v = 5
this.min = (this.ns||this.ie)
}
// automatically create the "is" object
is = new BrowserCheck();
originX = 0;
originY= 0;
function GetXY(e) {
originX = (is.ns)? e.pageX : event.x+document.body.scrollLeft;
originY = (is.ns)? e.pageY : event.y+document.body.scrollTop;
}
down_time = new Date();
up_time = new Date();
function up() {
up_time = new Date();
difference= up_time - down_time; // milliseconds!
alert("Time: "+difference+"ms\nX: "+originX+"\nY: "+originY);
}
function down(e) {
down_time = new Date();
GetXY(e);
}
if (is.ns) document.captureEvents(Event.MOUSEDOWN);
</script>
<img src="foo.gif" width="50" hight="50" onMouseUp="up()" onMouseDown="down()">
If you want the ACTUAL location of the image, and not the X-Y coordinates of WHERE ON THE IMAGE the mouse was clicked, this isnt the way to go, you need to mess around with the <DIV> for that, and using javascript you'll be able to get the X-Y coordinate of the IMAGE and not where the mouse was clicked on the image.
Play around with it, if you still need help w/ the div tag, post again.