42 Comment(s)

1. Shawn | Sep 14, 2006 | Reply

   Hey man! Thanks for posting this script! I modified it to make a basic image map coordinates widget. So you can click twice and make a rectangle and copy the coordinates. It’s basically a script for something I’m working on.

   http://www.shawngo.com/mappr/clicktest.html

   Cheers

2. deller | Oct 1, 2006 | Reply

   Hi,
   thank you for this nice example. It works just great in IE and Opera, but there are some strange problems with Firefox. Once I saw it worked on FF 1.5.0.7 well, but never again. Whenever I open this page (I mean your site, not my local tests) now using FF, pointer image just stuck in the left top corner of the background photo.

   I’m just wondering if this is some problem with my FF installation, or something else.

   BTW, it seems to be related to the “DOCTYPE” declaration, without it it works.

3. Andreas | Oct 5, 2006 | Reply

   great script - exactly what i needed this late night.

   I noticed however a funny feature:

   If you click anywhere and click exactly the same place again it goes to x=1 and Y=15

   But nevertheless - nice - very nice!

4. Emanuele Feronato | Oct 5, 2006 | Reply

   Seems to be an issue due to WordPress DOCTYPE declaration anc CSS.
   On a standalone page it works well.

5. Mahesh Sapkal | Oct 14, 2006 | Reply

   Thanks for posting such a nice script. Found it very useful as i am working on such a part. Anyway thank you very much. Keep up the great work.

6. iram | Nov 1, 2006 | Reply

   thank i was in surch for long . it great people like u r ther on net
   thank you

7. Amit | Nov 7, 2006 | Reply

   Doesn’t see to work on Firefox 2.0 (on OS X at least)

   I get the pointer once, but then it does not move again.

   Also the coordinates are relative to the page,not the image- is that the intention?

8. Johannes Tophøj Rasmussen | Dec 16, 2006 | Reply

   Doesn’t work in firefox 2.0 in linux either. Same behavior as described above…

9. Karl | Jan 7, 2007 | Reply

   Well.
   It does work in FF 2.0 on Windows…
   But “You pointed here” is always on the same place up in the left corner.

   Nice script.

10. a Noob | Jan 11, 2007 | Reply

    Hi,
    Need help with a bug in this script. If you click on the same position twice, the pointer will jump up to the left corner (in IE). Any idea how to solve it?
    Grateful

11. Vegard | Jan 27, 2007 | Reply

    If you replace event.pageX and event.pageY with event.layerX and event.layerY in the Javascript, it should work in FF as well.

    (Tested OK in Opera 9.10 and FF1.5.09 and FF2.0.0.1 and IE6)

    :-)

12. eNHbC2YBqp | Jan 29, 2007 | Reply

    Hi! Very nice site! Thanks you very much! w0ZeTcpYUT0Un

13. Frij | Feb 15, 2007 | Reply

    No luck in FF 2.0 (on windows), even with the change to layerX. The top-left corner is always in the 300 range, which I imagine is because I have a navigation area on the left-hand side of the page that it’s picking up on. The y is about 15 off. :(

14. Cory | Mar 2, 2007 | Reply

    To get it to work in FF I had to add
    “px”
    after the (pos_x-1) and (pos_y-15) (setting left/top)

15. vvk | Mar 5, 2007 | Reply

    cool script I like it!
    Though i need only to know that mouse coordinates in JavaScript are conrolled by event.offsetX and event.offsetY properties. I’m a rookie in JavaSCript and simply do not know where to find this properties. I looked for a mouse methods and props (like ActionScript) but apparently found nothing.

    So thank you, once again!

16. MayorSlack | Jun 21, 2007 | Reply

    My search: click image coordinates (”the” Google)
    First hit here…. and it’s 100% what i was looking for!!!
    Great work, and as soon as i get my proj complete… i will buying that beer! 100% thanks!

17. Kaushik | Jun 27, 2007 | Reply

    Hi Emanuele ,
    This is Excellent!!!
    It really helped me a lot.

18. Farit | Jul 14, 2007 | Reply

    The code for Mozilla doesn’t work.
    An excerpt from the code showing how to find pos_x and pos_y:

    function point_it(event)
    {
    var pointer_div = document.getElementById(”pointer_div”);

    //for IE
    if (window.ActiveXObject) {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    //for Firefox
    else {
    var top = 0, left = 0;
    var elm = pointer_div;
    while (elm) {
    left = elm.offsetLeft;
    top = elm.offsetTop;
    elm = elm.offsetParent;
    }

    pos_x = event.pageX - left;
    pos_y = event.pageY - top;
    }

    etc.

19. Stacy | Jul 17, 2007 | Reply

    Thanks, this was extremely useful.

    As for the bug where clicking twice makes the coordinates jump up to the upper left corner, you must remember that the flag that says ‘you pointed here’ is another element. Clicking in the same place (right on top of it) fires the click event from that img instead of the overall pointer_div. I am just a noob, so take my code with a grain of salt, but here is how I solved the prob: http://pastebin.com/ffd901ae

    (That gives correct coordinates only, none of the other stuff is in there…)

    Does anyone know what doctype you CAN use with FF?

20. Niraj Bhawnani | Jul 19, 2007 | Reply

    The reason this does not work in Firefox 2.x is that the CSS attributes are being set wrongly. To set a CSS width/height/margin/padding/left/right/top/bottom property, you must specify pixels (px) or percentage (%). You cannot simply assign a number! IE is OK with just a number and assumes pixels though. Normally you set it like this:
    … {
    top: 200px;
    }

    in Javascript you set it like this:
    document.getElementById(’myPointer’).style.top = ‘200px’;

    The problem is the script is doing this:
    document.getElementById(”cross”).style.left = (pos_x-1);

    Notice there is no ‘px’.. the fix is simple:
    document.getElementById(”cross”).style.left = (pos_x-1).toString() ‘px’;
    document.getElementById(”cross”).style.top = (pos_y-15).toString ‘px’;

    Hope this helps!

21. Danny Tipple | Aug 9, 2007 | Reply

    As above but the complete working script in firefox/ie/opera is..

    function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.layerX-document.getElementById(”pointer_div”).offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.layerY-document.getElementById(”pointer_div”).offsetTop;
    document.getElementById(”cross”).style.left = (pos_x-20) “px” ;
    document.getElementById(”cross”).style.top = (pos_y-29) “px” ;
    document.getElementById(”cross”).style.visibility = “visible” ;
    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
    }

22. Jan | Aug 12, 2007 | Reply

    Thanks everyone.

    Just took several hours of ‘dog-work’ off an assignment for me.

    Huge thanks!

23. Evan | Aug 17, 2007 | Reply

    Nice tutorial! Just what I was looking for my new project. ^_^

24. Abu Turab | Aug 21, 2007 | Reply

    it was really usefull and good idea, i really enjoyed it :)
    thanks keep on updating us with such a marvellous piece of code..
    bubyeee

25. radek gasiorek | Aug 30, 2007 | Reply

    Danny Tipple’s fx sollution has bug in while loop :
    it should be:
    while (elm) {
    left = elm.offsetLeft;
    top = elm.offsetTop;
    elm = elm.offsetParent;
    }

    so whole function is:

    function point_it(event){
    var pointer_div = document.getElementById(”pointer_div”);

    if (window.ActiveXObject) {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    //for Firefox
    else {
    var top = 0, left = 0;
    var elm = pointer_div;
    while (elm) {
    left = elm.offsetLeft;
    top = elm.offsetTop;
    elm = elm.offsetParent;
    }

    pos_x = event.pageX - left;
    pos_y = event.pageY - top;
    }

    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
    }

26. radek gasiorek | Aug 30, 2007 | Reply

    now I see it is forum problem - signs like ‘ ‘ are removed from posts
    so again

    while (elm) {
    left plus= elm.offsetLeft;
    top plus= elm.offsetTop;
    elm plus= elm.offsetParent;
    }

27. Thomas | Sep 19, 2007 | Reply

    I don’t think that this works in IE7. When I click on the image, the “you clicked here” image appears miles away to the right. And sometimes above it!

28. Sam | Sep 30, 2007 | Reply

    A correction to radek_gasiorek’s correction:

    while (elm) {
    left plus= elm.offsetLeft;
    top plus= elm.offsetTop;
    elm = elm.offsetParent;
    }

    note that the elm = elm.offsetParent is not a plus=.

    aside from the caveats, great script!

29. Aviv23 | Oct 5, 2007 | Reply

    Ok
    first of all it worked in ff or IE or Opra
    I guess the standards have changed.

    The sum of offsets come handy only for the IE,
    Firefox returns the right location with page(X/Y) property of the event.

    To get the right “element” clicked in IE you need to use the srcElement property of the event (the target property in Firefox).

    That “element” will be used in the sum function - (while (elm) {//do} ).

    Then calculate the x,y coordinates clicked.

    The alter will be to use event.clientX and not event.offsetX for IE :
    x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    same for y (replace Left with Top).

    If code needed let me know here.

    I’ll check in next week.

30. fatih beytar | Oct 18, 2007 | Reply

    BUG: Position problem of ‘you pointed here’ object. Change value of positing tag.

    OLD:
    position:relative;

    TRUE:
    position:absolute;

    Thank you.

31. Vinod | Oct 29, 2007 | Reply

    Good Job

    Thanks

32. Abhishek | Oct 30, 2007 | Reply

    Thanks very Much , For a valuable piece of work.

33. Xgarb | Nov 16, 2007 | Reply

    none JS super simple method..

    x and y returned as URL variables

34. Admirer | Dec 21, 2007 | Reply

    truly helpful
    thangs

35. Julian | Jan 2, 2008 | Reply

    Hi there,

    this should be the complete working source code for IE + FF

    unfortunately the pointer doesn´t appear anymore!
    does anybody know if there is a version like shawn described in the first post (http://www.shawngo.com/mappr/clicktest.html)??

    regards, Julian

    function point_it(event){
    var pointer_div = document.getElementById(”pointer_div”);

    if (window.ActiveXObject) {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    //for Firefox
    else {
    var top = 0, left = 0;
    var elm = pointer_div;
    while (elm) {
    left = elm.offsetLeft;
    top = elm.offsetTop;
    elm = elm.offsetParent;
    }

    pos_x = event.pageX - left;
    pos_y = event.pageY - top;
    }

    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
    }

    You pointed on x = - y =

36. Catherine | Feb 7, 2008 | Reply

    I was wondering if anyone has had any luck getting the pointer to appear with the latest code by Julian. I haven’t.

    Thanks.

37. Grafficiane | Feb 21, 2008 | Reply

    Is it possible to set picture’s top-left corner as the code’s reference top-left corner instead of page itself. Cause when you change picture’s position or if you have a different resolution coordinates will be different in this code…

38. nicole | Mar 31, 2008 | Reply

    Hey..I have been looking for something similar to this. I would actually like for the coordinates to be displayed in a stationary graphic when the user moves their mouse anywhere on the website. How could I adapt this code to do that?

39. prashanth | Apr 27, 2008 | Reply

    thankz it really helped a lot in my project….. tis was better than any software…… once again thankz a lot..

40. David Barker | Apr 28, 2008 | Reply

    Hey there…

    Just tried this script on my site, and played with it a little to try and get it working right.

    It works fine in IE - the top left of the div I’m wanting to use with it comes up as 0,0. However, in Firefox, the top left of the div is like 380,267.
    In a perfect world, I could just subtract these values and make it 0,0 but obviously different screen resolutions etc will change it - I’ve also noticed that if I shrink my browser window so that the div gets closer to the left of the page (it’s centered right now), the ‘x’ coord shrinks too.

    I love the idea of this script but has anyone got any idea how to fix my dilema?? Again, it works perfectly in IE, but not in Firefox.

    Thanks!

    Dave

41. David Barker | Apr 28, 2008 | Reply

    Hey there… just as I posted I found a fix! This might help anyone out…

    http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript

    Seems to work for me in all browsers!!

    Thanks to this site though for giving me the initial info :-D

    Dave

42. Radek Wieszczyk | Jun 26, 2008 | Reply

    Hello,

    Thanks a lot! I was trying to do something like this and almost surrended and then I’ve found Your solution!

    On Safari 3.1.1 in Mac OS X 10.4.11 works perfectly!

Post a Comment