awalters
asked on
Capturing Event's X/Y Coordinates in Netscape 6
I want to capture x and y coordinates of a user?s click inside a graphic image (relative to its upper left corner) in Netscape 6. Making the graphic an image map would accomplish this, but I want to capture the coordinates without reloading the page.
It's easy in IE 5+, using event.offsetX, but this isn't available in Netscape 6. I used the following alternative in Netscape:
xPosition = event.clientX - (document.getElementById(" clickfield ").offsetL eft);
yPosition = event.clientY - (document.getElementById(" clickfield ").offsetT op);
However, this only works if the user doesn?t scroll before clicking. Here?s why:
event.clientY is the click event?s y-offset relative to the *browser* frame. This value is altered when the user scrolls.
document.getElementById("c lickfield" ).offsetTo p is the graphic's y-offset relative to the *page*. This value remains unchanged regardless of whether the user has scrolled.
Since the two values I rely on respond differently to scrolling, I only get the correct value if the user has not scrolled.
Points to anyone who can tell me how to do this in Netscape 6, in a manner that works even if the user has scrolled. Please also recommend any resources that provide information on event properties such as event.clientX and others in Netscape 6.
Thank you,
awalters
It's easy in IE 5+, using event.offsetX, but this isn't available in Netscape 6. I used the following alternative in Netscape:
xPosition = event.clientX - (document.getElementById("
yPosition = event.clientY - (document.getElementById("
However, this only works if the user doesn?t scroll before clicking. Here?s why:
event.clientY is the click event?s y-offset relative to the *browser* frame. This value is altered when the user scrolls.
document.getElementById("c
Since the two values I rely on respond differently to scrolling, I only get the correct value if the user has not scrolled.
Points to anyone who can tell me how to do this in Netscape 6, in a manner that works even if the user has scrolled. Please also recommend any resources that provide information on event properties such as event.clientX and others in Netscape 6.
Thank you,
awalters
ASKER
I'm using Netscape 6.1, and find that offsetTop/Left are undefined. See the following for the sample script in which I determined it was unavailable.
www.xmission.com/~dgoddard/dots/newdots_simple.html
The following is the contents of the page at the URL above:
<HTML><HEAD>
<SCRIPT language=JavaScript>
//This captures user's mouse clicks inside an image, both graphically by placing "dots" there, as well as via coordinates which are displayed in a form field.
var dots = ["dot0", "dot1", "dot2", "dot3", "dot4", "dot5", "dot6", "dot7", "dot8", "dot9", "dot10"];
var xycoords = ""; //Will hold coordinates string collected from mouse events
function placeDot(event)
{
xPosition = event.offsetX?(event.offse tX):event. clientX - (document.getElementById(" imgDiv").o ffsetLeft) ;
yPosition = event.offsetY?(event.offse tY):event. clientY - (document.getElementById(" imgDiv").o ffsetTop);
//Populate coords string.
if (!(xycoords=="")) {
xycoords=xycoords + ", ";
}
xycoords += (xPosition) + ',' + (yPosition);
document.getElementById("c oords").va lue = xycoords;
window.status=xycoords;
// Loop until find first free dot for display, then give it the mouse event's coordinates.
found=false;
for (i=0; i<dots.length; i++) {
if (document.getElementById(d ots[i]).st yle.visibi lity == "hidden") {
//window.status+=dots[i]+" "+xycoords;
found=true;
break;
}
}
if (found) {
document.getElementById(do ts[i]).sty le.left = (xPosition) ;
document.getElementById(do ts[i]).sty le.top = (yPosition) ;
document.getElementById(do ts[i]).sty le.visibil ity = "visible" ;
//return ; //uncomment this to prevent the alert box below from showing
}
//The following is simply for testing, creating an alert that shows available and unavailable properties
alert('\n ?event.offsetY:'+event.off setY+
'\n else event.clientY:'+event.clie ntY+
'\n minus document.getElementById("i mgDiv").of fsetTop:'+ document.g etElementB yId("imgDi v").offset Top+
'\n my calculated yPosition:'+yPosition+
'\n document.getElementById("i mgDiv").sc rollTop:'+ document.g etElementB yId("imgDi v").scroll Top+
'\n event.target.offsetY:'+eve nt.target. offsetY+
'\n event.offsetY:'+event.offs etY+
'\n event.offsetTop:'+event.of fsetTop+
'\n clientY'+document.getEleme ntById("im gDiv").cli entY+
'\n clientTop'+document.getEle mentById(" imgDiv").c lientTop+
'\n clientLeft'+document.getEl ementById( "imgDiv"). clientLeft );
}
</SCRIPT>
</HEAD>
<BODY bgcolor="999999">
Click inside the grey box, then scroll a little and repeat.
<p> </p><p> </p> <p> < /p><p>&nbs p;</p><p>& nbsp;</p>
<FORM name="myform" method=post encType=multipart/form-dat a>
<INPUT size=100 name="coords" id="coords" value="">
<DIV id="imgDiv" style="POSITION:relative; visibility:visible; left:0; top:0;" width=300 height=300 onClick="placeDot(event)">
<IMG SRC="greybox.gif" width=300 height=300 border=1 id="clickfield" style="visibility:visible; left:0; top:0; z-index:1">
<script>
for (i=0;i<dots.length;i++) {
document.write('<img src="dot.gif" id='+dots[i]+' style="position:absolute; visibility:hidden; z-index:2;">');
}
</script>
</DIV>
<input type="Submit" name="submit" value="Submit">
</FORM>
<p> </p><p> </p> <p> < /p><p>&nbs p;</p>
</BODY></HTML>
www.xmission.com/~dgoddard/dots/newdots_simple.html
The following is the contents of the page at the URL above:
<HTML><HEAD>
<SCRIPT language=JavaScript>
//This captures user's mouse clicks inside an image, both graphically by placing "dots" there, as well as via coordinates which are displayed in a form field.
var dots = ["dot0", "dot1", "dot2", "dot3", "dot4", "dot5", "dot6", "dot7", "dot8", "dot9", "dot10"];
var xycoords = ""; //Will hold coordinates string collected from mouse events
function placeDot(event)
{
xPosition = event.offsetX?(event.offse
yPosition = event.offsetY?(event.offse
//Populate coords string.
if (!(xycoords=="")) {
xycoords=xycoords + ", ";
}
xycoords += (xPosition) + ',' + (yPosition);
document.getElementById("c
window.status=xycoords;
// Loop until find first free dot for display, then give it the mouse event's coordinates.
found=false;
for (i=0; i<dots.length; i++) {
if (document.getElementById(d
//window.status+=dots[i]+"
found=true;
break;
}
}
if (found) {
document.getElementById(do
document.getElementById(do
document.getElementById(do
//return ; //uncomment this to prevent the alert box below from showing
}
//The following is simply for testing, creating an alert that shows available and unavailable properties
alert('\n ?event.offsetY:'+event.off
'\n else event.clientY:'+event.clie
'\n minus document.getElementById("i
'\n my calculated yPosition:'+yPosition+
'\n document.getElementById("i
'\n event.target.offsetY:'+eve
'\n event.offsetY:'+event.offs
'\n event.offsetTop:'+event.of
'\n clientY'+document.getEleme
'\n clientTop'+document.getEle
'\n clientLeft'+document.getEl
}
</SCRIPT>
</HEAD>
<BODY bgcolor="999999">
Click inside the grey box, then scroll a little and repeat.
<p> </p><p> </p>
<FORM name="myform" method=post encType=multipart/form-dat
<INPUT size=100 name="coords" id="coords" value="">
<DIV id="imgDiv" style="POSITION:relative; visibility:visible; left:0; top:0;" width=300 height=300 onClick="placeDot(event)">
<IMG SRC="greybox.gif" width=300 height=300 border=1 id="clickfield" style="visibility:visible;
<script>
for (i=0;i<dots.length;i++) {
document.write('<img src="dot.gif" id='+dots[i]+' style="position:absolute; visibility:hidden; z-index:2;">');
}
</script>
</DIV>
<input type="Submit" name="submit" value="Submit">
</FORM>
<p> </p><p> </p>
</BODY></HTML>
ASKER
Oops: In my first paragraph above, I meant to refer to scrollTop/Left being undefined instead of offsetTop/Left.
:-)
:-)
ASKER
Note: make sure you use Netscape (6) to look at the URL I provided, as IE produces errors.
Do you want the coordinates relative to the image div or relative to the original unscrolled page?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Fantastic!!
What's the best documentation source for identifying event capabilities like this?
What's the best documentation source for identifying event capabilities like this?
ASKER
Thank you very much!
Couldn't be bothered to read all that. Here is an easy solution:
<blockquote>
element.style.left=e.clien tX+documen t.body.scr ollLeft;
element.style.top=e.client Y+document .body.scro llTop;
</blockquote>
Works in both IE and Gecko.
<blockquote>
element.style.left=e.clien
element.style.top=e.client
</blockquote>
Works in both IE and Gecko.
Regards,
CJ