Solved

Capturing Event's X/Y Coordinates in Netscape 6

Posted on 2001-09-15
9
8,336 Views
Last Modified: 2008-02-26
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").offsetLeft);

     yPosition = event.clientY - (document.getElementById("clickfield").offsetTop);



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("clickfield").offsetTop 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
0
Comment
Question by:awalters
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 6485572
instead of offsetLeft, use scrollLeft. Same for offsetTope.

Regards,
CJ
0
 

Author Comment

by:awalters
ID: 6485821
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.offsetX):event.clientX - (document.getElementById("imgDiv").offsetLeft);
     yPosition = event.offsetY?(event.offsetY):event.clientY - (document.getElementById("imgDiv").offsetTop);

     //Populate coords string.
     if (!(xycoords=="")) {
          xycoords=xycoords + ", ";
     }
     xycoords += (xPosition) + ',' + (yPosition);
     document.getElementById("coords").value = 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(dots[i]).style.visibility == "hidden") {
               //window.status+=dots[i]+" "+xycoords;
               found=true;
               break;
          }
     }
     if (found) {
          document.getElementById(dots[i]).style.left = (xPosition) ;
          document.getElementById(dots[i]).style.top = (yPosition) ;
          document.getElementById(dots[i]).style.visibility = "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.offsetY+
     '\n else event.clientY:'+event.clientY+
     '\n minus document.getElementById("imgDiv").offsetTop:'+document.getElementById("imgDiv").offsetTop+
     '\n my calculated yPosition:'+yPosition+
     '\n document.getElementById("imgDiv").scrollTop:'+document.getElementById("imgDiv").scrollTop+
     '\n event.target.offsetY:'+event.target.offsetY+
     '\n event.offsetY:'+event.offsetY+
     '\n event.offsetTop:'+event.offsetTop+
     '\n clientY'+document.getElementById("imgDiv").clientY+
     '\n clientTop'+document.getElementById("imgDiv").clientTop+
     '\n clientLeft'+document.getElementById("imgDiv").clientLeft );

}

</SCRIPT>
</HEAD>
<BODY bgcolor="999999">
Click inside the grey box, then scroll a little and repeat.
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<FORM name="myform" method=post encType=multipart/form-data>
   <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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
</BODY></HTML>
0
 

Author Comment

by:awalters
ID: 6485826
Oops:  In my first paragraph above, I meant to refer to scrollTop/Left being undefined instead of offsetTop/Left.

:-)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:awalters
ID: 6485832
Note: make sure you use Netscape (6) to look at the URL I provided, as IE produces errors.
0
 
LVL 12

Expert Comment

by:ahosang
ID: 6489032
Do you want the coordinates relative to the image div or relative to the original unscrolled page?
0
 
LVL 12

Accepted Solution

by:
ahosang earned 300 total points
ID: 6489061
If you want the coords relative to the image div alone, her's the code - I had to clean up some string termination errors(maybe EE wrapping) and make a multi-line comment at the top. Check Tasks-->Tools-->Javascript Console in NS 6 for any errors:
<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.offsetX):event.pageX-document.getElementById("imgDiv").offsetLeft;
    yPosition = event.offsetY?(event.offsetY):event.pageY-document.getElementById("imgDiv").offsetTop;

    //Populate coords string.
    if (!(xycoords=="")) {
         xycoords=xycoords + ", ";
    }
    xycoords += (xPosition) + ',' + (yPosition);
    document.getElementById("coords").value = 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(dots[i]).style.visibility == "hidden") {
              //window.status+=dots[i]+" "+xycoords;
              found=true;
              break;
         }
    }
    if (found) {
         document.getElementById(dots[i]).style.left = (xPosition) ;
         document.getElementById(dots[i]).style.top = (yPosition) ;
         document.getElementById(dots[i]).style.visibility = "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.offsetY+
    '\n else event.clientY:'+event.clientY+
    '\n minus document.getElementById("imgDiv").offsetTop:'+document.getElementById("imgDiv").offsetTop+
    '\n my calculated yPosition:'+yPosition+
    '\n document.getElementById("imgDiv").scrollTop:'+document.getElementById("imgDiv").scrollTop+
    '\n event.target.offsetY:'+event.target.offsetY+
    '\n event.offsetY:'+event.offsetY+
    '\n event.offsetTop:'+event.offsetTop+
    '\n clientY'+document.getElementById("imgDiv").clientY+
    '\n clientTop'+document.getElementById("imgDiv").clientTop+
    '\n clientLeft'+document.getElementById("imgDiv").clientLeft );

}

</SCRIPT>
</HEAD>
<BODY bgcolor="999999">
Click inside the grey box, then scroll a little and repeat.
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<FORM name="myform" method=post encType=multipart/form-data>
  <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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<img src="spacer.gif" width="1" height="500" border="0">
</BODY></HTML>
0
 

Author Comment

by:awalters
ID: 6489179
Fantastic!!

What's the best documentation source for identifying event capabilities like this?
0
 

Author Comment

by:awalters
ID: 6489181
Thank you very much!
0
 

Expert Comment

by:anywaste
ID: 14575212
Couldn't be bothered to read all that.  Here is an easy solution:

<blockquote>
element.style.left=e.clientX+document.body.scrollLeft;
element.style.top=e.clientY+document.body.scrollTop;
</blockquote>


Works in both IE and Gecko.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP: Filling Out/Creating a PDF 29 96
Debugging Html 8 31
Table doesn't show the lines! 3 23
Hta File displays dynamic File names 4 45
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question