Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Click image and get coordinates with Javascript

I had to display several photos where the user can click over an interesting point and have its coordinates passed through a form.
Of course, it was a bit more complicated, but this is the code i want to share with you.

Let’s assume we have a photo like this:

Try to click on a photo now…

You pointed on x = – y =

If you continue to click on the photo, you will see pointer changing its position, same thing with x and y coordinates

How can it be done?

You can try this script, obviously changing path and styles according to your needs

Tested both on Firefox and Explorer, it seems to work well.

Enjoy and give me feedback.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (250 votes, average: 4.44 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 99 comments

  1. Shawn

    on September 14, 2006 at 2:07 pm

    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

    on October 1, 2006 at 1:02 pm

    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

    on October 5, 2006 at 12:34 am

    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

    on October 5, 2006 at 10:29 am

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

  5. Mahesh Sapkal

    on October 14, 2006 at 8:20 am

    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

    on November 1, 2006 at 8:18 pm

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

  7. Amit

    on November 7, 2006 at 7:23 am

    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

    on December 16, 2006 at 5:58 pm

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

  9. Karl

    on January 7, 2007 at 3:02 am

    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

    on January 11, 2007 at 7:57 pm

    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

    on January 27, 2007 at 11:44 pm

    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

    on January 29, 2007 at 6:33 pm

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

  13. Frij

    on February 15, 2007 at 7:38 am

    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

    on March 2, 2007 at 8:48 pm

    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

    on March 5, 2007 at 2:35 pm

    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

    on June 21, 2007 at 2:03 am

    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

    on June 27, 2007 at 5:38 pm

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

  18. Farit

    on July 14, 2007 at 11:51 pm

    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

    on July 17, 2007 at 9:32 pm

    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

    on July 19, 2007 at 8:52 pm

    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

    on August 9, 2007 at 3:05 pm

    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

    on August 12, 2007 at 5:02 pm

    Thanks everyone.

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

    Huge thanks!

  23. Evan

    on August 17, 2007 at 10:04 pm

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

  24. Abu Turab

    on August 21, 2007 at 10:27 am

    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

    on August 30, 2007 at 5:36 pm

    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

    on August 30, 2007 at 5:38 pm

    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

    on September 19, 2007 at 6:29 am

    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

    on September 30, 2007 at 7:14 pm

    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

    on October 5, 2007 at 11:39 pm

    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

    on October 18, 2007 at 9:05 am

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

    OLD:
    position:relative;

    TRUE:
    position:absolute;

    Thank you.

  31. Vinod

    on October 29, 2007 at 10:59 am

    Good Job

    Thanks

  32. Abhishek

    on October 30, 2007 at 12:25 pm

    Thanks very Much , For a valuable piece of work.

  33. Xgarb

    on November 16, 2007 at 9:00 pm

    none JS super simple method..

    x and y returned as URL variables

  34. Admirer

    on December 21, 2007 at 12:55 pm

    truly helpful
    thangs

  35. Julian

    on January 2, 2008 at 9:46 pm

    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

    on February 7, 2008 at 2:20 am

    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

    on February 21, 2008 at 2:21 am

    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

    on March 31, 2008 at 11:00 pm

    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

    on April 27, 2008 at 12:04 pm

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

  40. David Barker

    on April 28, 2008 at 2:16 am

    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

    on April 28, 2008 at 4:03 pm

    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

    on June 26, 2008 at 10:39 am

    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!

  43. google pagerank

    on July 24, 2008 at 1:35 pm

    Really Nice tutorial..Thanks..:)

  44. tukel

    on August 13, 2008 at 3:22 pm

    Thank you very much…
    Saved me from a lot of pain.

  45. Ret

    on September 29, 2008 at 11:52 am

    Hi, i have some problems when i try to insert more than 1 pointer:
    The second pointer div always appears out of the image, the x coordinate is correct but the y is y+image height.
    Cound you please help me?

  46. History Atlas: Technological Framework

    on October 21, 2008 at 1:53 pm

    [...] get mouse coordinates at click image in JavaScript page_revision: 1, last_edited: 1224589375|%e %b %Y, %H:%M %Z (%O ago) edittags history files print site tools+ options edit sections append backlinks view source parent block rename delete help | terms of service | privacy | report a bug | flag as objectionable Hosted by Wikidot.com — get your free wiki now! Unless stated otherwise Content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License Click here to edit contents of this page. Click here to toggle editing of individual sections of the page (if possible). Watch headings for an “edit” link when available. Append content without editing the whole page source. Check out how this page has evolved in the past. If you want to discuss contents of this page – this is the easiest way to do it. View and manage file attachments for this page. A few useful tools to manage this Site. See pages that link to and include this page. Change the name (also URL address, possibly the category) of the page. View wiki source for this page without editing. View/set parent page (used for creating breadcrumbs and structured layout). Notify administrators if there is objectionable content in this page. Something does not work as expected? Find out what you can do. General Wikidot.com documentation and help section. Wikidot.com Terms of Service – what you can, what you should not etc. Wikidot.com Privacy Policy. _uff = false; _uacct = “UA-68540-5″; _udn=”wikidot.com”; urchinTracker(); [...]

  47. Cheekyjinx

    on November 14, 2008 at 3:37 am

    Hello all,
    Firstly thank you to you for creating this script and thanks to everyone who has posted replies with minor fixes here and there on this script.

    I am wondering if a kind soul would enlighten me by posting their final version of this script which would allow me to put a href on the pointer image and not have the coordinates change when that is clicked on!
    It’s been puzzling me all night and at 2AM I’ve finally given in and had to ask!

    Thanks again everyone.
    Jinx

  48. ozechris

    on December 12, 2008 at 6:16 am

    Just the ticket for updating staff location maps on our intranet. Thanks.

  49. Dan

    on January 12, 2009 at 2:52 am

    I had trouble getting this to work in newer browswers. Here is my solution

    function coord( e, image) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;

    if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
    posx = event.offsetX;
    posy = event.offsetY;
    }

    if (image.x || image.y) {
    posx -= image.x;
    posy -= image.y;
    }
    theForm=document.aspnetForm;
    theForm.form_x.value=posx;
    theForm.form_y.value=posy;

    }

    You pointed on x = – y =

  50. ikod

    on January 17, 2009 at 4:39 pm

    tested in IE7 and FF3

    if (window.ActiveXObject) {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }else{
    // example FF
    var top = 0, left = 0;
    var elm = pointer_div;
    while (elm) {
    left = elm.offsetLeft + left;
    top = elm.offsetTop + top;
    elm = elm.offsetParent;
    }
    pos_x = event.pageX – left;
    pos_y = event.pageY – top;
    }

  51. Posizionare un div al click del mouse | hilpers

    on January 17, 2009 at 10:56 pm

    [...] del mouse. Se uso clientX e clientY funziona su IE ma non > su FF. Mi sembra che l’esempio http://www.emanueleferonato.com/2006…th-javascript/ faccia il caso tuo Ciao [...]

  52. Como obtener las coordenadas del raton | hilpers

    on January 18, 2009 at 1:35 pm

    [...] un ejemplo de como ejecutar esto sobre una imagen – Click image and get coordinates with Javascript http://www.emanueleferonato.com/2006…th-javascript/ Como lo estan implementando? ya que con postback es un tanto "no llamativo".. Podrias [...]

  53. Image Question | keyongtech

    on January 18, 2009 at 6:35 pm

    [...] Image Question Hi Jason, Is this helpful? Javascript solution: http://www.emanueleferonato.com/2006…th-javascript/ ASP.NET solution: http://msdn.microsoft.com/en-us/libr…wf(VS.85).aspx Some extended discussion: [...]

  54. Anand

    on February 17, 2009 at 8:27 am

    Image Map Prototype

    function point_it(event)
    {
    var pos_x=0; /* this is required for IE */
    var pos_y=0; /* this is required for IE */
    var pointer_img = document.getElementById(“pointer_img”); /* pointer_img is an id of image tag or div tag as per your need */

    /****************** Rest of the code is same as per ikod ***************************/
    if (window.ActiveXObject)
    {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    else
    {
    // example FF
    var top = 0, left = 0;
    var elm = pointer_img;
    while (elm) {
    left = elm.offsetLeft + left;
    top = elm.offsetTop + top;
    elm = elm.offsetParent;
    }
    pos_x = event.pageX – left;
    pos_y = event.pageY – top;
    }
    document.getElementById(“pos_x”).value = pos_x; /************* pos_x & pos_y is the id of the input tags *************/
    document.getElementById(“pos_y”).value = pos_y;
    }

    <!– –>

    x=
    y=

  55. Q-tech

    on February 21, 2009 at 5:57 pm

    It seems there is a requirement for IE for this script to work – you must declare the event listener with the event parameter:

    If you ommit “event” in this declaration or use javascript to assign the handler like:
    document.getElementById(‘pointer-div’).onclick=point_it;
    IE will not pass the default “event” argument to the function and you will get undefined elements errors.
    Took me a while to figure that out, hope this helps someone…

  56. waldyd

    on March 4, 2009 at 10:57 pm

    You don’t necessarily need any special script if you have your image as a submit button (type=”image”) on a form. The X and Y values are returned with the form submission – standard browser behaviour.

    html:

    “”

    myimage.x and myimage.y are returned. However, these are converted to myimage_x and myimage_y by PHP.

    PHP:
    echo ‘X:’.$_POST["myimage_x"].’ Y:’.$_POST["myimage_y"];

  57. tm

    on May 27, 2009 at 8:37 pm

    I needed to find the location of X and Y whenever you click on any spot on the window. I am using the following script for this. It works on IE and FF.

    function clickedXY(event)
    {
    // for IE
    if (window.ActiveXObject)
    {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    //for Firefox
    else
    {
    pos_x = event.pageX;
    pos_y = event.pageY;
    }
    str = “x=” + pos_x + ” y=” + pos_y + “\nlocation=” + document.location ;
    alert(str);
    }

  58. tm1

    on May 28, 2009 at 8:20 pm

    I have added the capability to have the coordinates from the whole window registered or from specific areas on a window (one or more).

    function clickedXY(event, id)
    {
    if (window.ActiveXObject)
    {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    else //for Firefox
    {
    pos_x = event.pageX;
    pos_y = event.pageY;
    }

    var rtn = "&id="+id;
    rtn += "&pos_x="+pos_x;
    rtn += "&pos_y="+pos_y;
    rtn += "&url="+document.location;
    alert(rtn);
    }

    <!-- -->

    Test section 1

    this is a test section
    entry for whatever
    you can think of.

    Test section 2

    this is a test section
    entry for whatever
    you can think of.

  59. Steve Alley

    on July 2, 2009 at 10:22 pm

    I’m new to this. I copied your script into one of my pages. How do I actually connect that script with a picture I need to get the coordinates for?

    Thanks for understanding my learning curve.

  60. Mahesh

    on July 14, 2009 at 11:56 am

    Cool Tip…It reduces lot of work specially developing image maps.

  61. Biswomohan

    on August 3, 2009 at 11:08 am

    Hi,
    I need ur,help.
    I have an image of a counrty.which contains 113
    cities.From which I have to work on 78 cities.
    My requirement is like when I move the mouse to my 78 cites the mouse pointer became a hand and a pop up will caome with the city information.Can u suggest how to work on it?

  62. Jaykey

    on August 9, 2009 at 3:45 am

    Hi all,

    Thanks for the hot discussion and helps by providing your experience.
    I am wondering, how can we put such appliction to get control over a VLC Plugin/activex for getting coordinate of a running video.

    It will be helpful to control video on full screen without using other controls

  63. harini

    on August 30, 2009 at 6:03 pm

    Really!!!
    Thank u so much!! I was searching for this code! You deserve to be appreciated!!Once again Thank u so much
    Your rating is 5*****

  64. Gopa

    on November 5, 2009 at 6:59 am

    Hi.. Nice article..

    Is it possible to display the image path on mouse click. E.g. on clicking the image or a link, it should display the actual image or file path and get the same copied to the clipboard. same as the case with copy shortcut in windows

  65. pThomas

    on December 17, 2009 at 7:44 am

    Thanks for the post, i’m using the x position returned as an array subscript to a javascript parameter passed to a bookmarking function. This saves a few lines of code (1 href instead of 12 and one image instead of 12 images) and allows me to put the js code in one external file for the hole site.

  66. Monc

    on January 6, 2010 at 1:33 am

    I am new at this and i am confused as all heck if anyone could assist me my e-mail is Moncaric28@live.ca

    could use some help with a few things. thanks

  67. Ottavio

    on March 30, 2010 at 10:00 am

    I use this script, it works really well even with complex layouts (the one in this page doesn’t).

    http://www.scribd.com/doc/29158842/Get-Mouse-Position-Relative-to-Image

  68. alok das

    on June 21, 2010 at 3:41 pm

    Fantastic

  69. Vianyak

    on July 23, 2010 at 2:09 pm

    How to implement this in google maps

  70. Vinayak

    on July 23, 2010 at 2:09 pm

    How to implement this in google maps.

  71. pankaj yadav

    on August 13, 2010 at 1:45 pm

    Thanks a lot ,what a wonderfull code ,its works very well
    i hope it can help on mobile app enabled javascript to fullfill any requirement.

  72. w

    on September 11, 2010 at 11:15 am

    Too bad this doesn’t work if element’s position is fixed.

  73. Srinu

    on September 28, 2010 at 12:52 pm

    This is really a good script and it helped me a lot.

    Thanks a lot for the script.

  74. BadFellas

    on September 30, 2010 at 1:51 pm

    Just to let you and visitors know: also works fine in Opera 10.62.

  75. Hitesh

    on February 19, 2011 at 11:20 pm

    Superb Man. It’s awesum code.

  76. kat

    on March 16, 2011 at 7:20 am

    Wow, this is great! Just what I’ve been looking for..thank you, thank you, thank you!

  77. Tomas

    on April 18, 2011 at 11:25 am

    Hello there,

    Thank you very much. Very helpful & useful. As for the pointer bug. Here is the solution:

    document.getElementById(“cross”).style.left = (pos_x-1).toString() + “px” ;
    document.getElementById(“cross”).style.top = (pos_y-15).toString() + “px”;

  78. Vasim Padhiyar

    on April 19, 2011 at 6:02 pm

    Thanks for post…

  79. Thomblin

    on April 25, 2011 at 8:58 pm

    Thanks a lot, helped me very much, but I used the version of Farit (on July 14, 2007 at 11:51 pm) like this

    var pos_x = 0;
    var pos_y = 0;
    function get_click_coords(event)
    {
    var pointer_div = document.getElementById(‘captcha’);

    // IE
    if (window.ActiveXObject)
    {
    pos_x = window.event.offsetX;
    pos_y = window.event.offsetY;
    }
    // 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;
    }
    }

  80. Hao Zhe XU

    on May 17, 2011 at 10:56 am

    This is wonderful, however, does it still work if I view the website of the image in a mobile phone browser and pinched to zoom it in/out?

    Thanks!

  81. toys online

    on May 27, 2011 at 6:22 am

    This is brilliant. How would I determine the co-ordinates of different areas of an image to use coords?

  82. Mehdi

    on June 6, 2011 at 9:23 am

    Thank you ,
    It was helpful

  83. nikolas

    on June 18, 2011 at 5:45 am

    Thanx great example

  84. Jessica

    on October 20, 2011 at 11:57 am

    Great this posting…!
    But I have Problem,
    how about if i show the image in
    div pan tag that has resolution 500×500 pixel in style.css
    the image has resolution 800×800
    so the image just show in 500×500
    but it can move to right, left up and down with pan control.

    the problem is
    when i click image just show coordinates in max 500×500
    but the image has resolution 800×800
    has any ideas??

    You pointed on x = – y =

    and style.css
    #pan :{
    border: #dddddd 1px solid;
    width: 500px;
    height: 500px;
    overflow: hidden;
    }

    the code is work but the coordinates
    X and Y is just in div pan with max 500×500 pixel

  85. jeba

    on November 1, 2011 at 12:13 pm

    Thank you ,
    It was helpful

  86. Syteg

    on November 8, 2011 at 11:30 am

    Thank you, Ottavio.

    I use this script, providing by your link, it works really well. Just look at:

    http://www.scribd.com/doc/29158842/Get-Mouse-Position-Relative-to-Image

  87. Zeena

    on March 15, 2012 at 10:41 pm

    Does anyone know how to implement this in NetBeans?

  88. zenna123

    on March 18, 2012 at 8:45 pm

    anyone know how to create this using Java in NetBeans

  89. ben martinez

    on April 1, 2012 at 7:57 pm

    Hi, sorry for being a little novice in this, but if I have my website, where do I place this code, and also the image? many thanks

  90. vivek

    on April 13, 2012 at 9:20 am

    Thanks you..
    its helped me a lot.. :)
    great work.
    keep it up..

  91. arief

    on May 8, 2012 at 5:59 am

    Thanx BOS!!!

  92. Ganesh

    on July 9, 2012 at 6:01 pm

    Excellent Work, Got the needed thing @ right time… Thanks Bro…

  93. Bruno

    on November 14, 2012 at 6:15 pm

    Hi.

    What can I do if I want to get the coords of two different points? If I duplicate the sstarting scriot, it won’t work correctly.
    Moreover, I’ d like to catch the distance in mm between the points?
    Any ideas?

    Kind Regards

  94. Really?

    on December 8, 2012 at 12:42 am

    This sucks…. I really hope you don’t have a coding job

  95. Wisdom

    on December 23, 2012 at 7:52 pm

    Where can i place my images on the codes

  96. paria

    on June 13, 2013 at 9:12 am

    Well done Emanuele!
    You generously solve my problem and I just want to thank you for sharing this code. Thank you, thank you and again thank you! And thanks Shawn too.
    Kind Regards

  97. Kingsley Simon

    on September 24, 2013 at 8:47 am

    How do you use this if you are using C# ASp.Net ImageMap? A newbie in Programming.

  98. nikhil

    on April 24, 2014 at 1:05 pm

    thanks man I really needed this..

    appreciate your good work.

  99. Piese auto Dacia

    on July 17, 2014 at 2:44 pm

    Thanks man :) You save my time!

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×