...

View Full Version : Click location on image in FireFox?



HansAtWork
08-11-2005, 12:23 PM
Hello,
I want to capture the mouseposition when an image is clicked. I get it in IE like this:
posx = window.event.offsetX
posy = window.event.offsetY
In case off click on the upper left corner of the image, result is posx=0, posy=0.
This does not work in FireFox. (offsetX and offsetY do not exist ).
I tried this for handling the onclick event:
function HandleMapClick(e)
{
posx = e.layerX;
posy = e.layerY;
}
However, this seems to give the mouseposition calculated from the upper
left corner of the browser. I want it from the upper left corner off the image.
Can anyone help me? Thanks in advance!

Kor
08-11-2005, 01:14 PM
Welcome to the Forum! :thumbsup:

Is this what you are looking for?:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
margin-left:0px;
margin-top:100px;
}
-->
</style>
<script type="text/javascript">
var mX;var mY;
function checkS(e){// captures the mouse position
mX = 0;mY = 0;
if (!e) {var e = window.event};//IE
if (e.pageX || e.pageY){//Moz
mX = e.pageX; mY = e.pageY;
}
else if (e.clientX || e.clientY){//IE
mX = e.clientX-2; mY = e.clientY-2;//IE correction
}
}
function showP(obj){
var oX = obj.offsetLeft;var oY = obj.offsetTop;
while(obj.parentNode){// finds the absolute position of the object
oX=oX+obj.parentNode.offsetLeft;
oY=oY+obj.parentNode.offsetTop;
if(obj==document.getElementsByTagName('body')[0]){break}
else{obj=obj.parentNode;}
}
var rX=mX-oX;//relative X
var rY=mY-oY;//relative Y
alert('the relative mouse position is: X='+rX+' Y='+rY)
}
</script>
</head>
<body onmousemove="checkS(event)">
<img src="00.jpg" border="0" align="right" onclick="showP(this)">
</body>
</html>


As you can see, IE needs a correction of -2:-2 (x:y) pixels, I don't know why..., Bill Gates should know.... :D

HansAtWork
08-11-2005, 02:19 PM
Yes, that is exactly what i need. Many thanks! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum