Image showing different coordinates on different browsers

Question

I am plotting an image of fixed width and height. I am allowing the user to click on the image - and storing the location (x-y coordinates) where the image was clicked. Here is a sample code:

<script language="JavaScript" type="text/JavaScript">
    var posx; var posy;

 function showP(e) {
        // captures the mouse position
        posx = 0; 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 = e.clientX;
            posy = e.clientY;
        }
        alert('X mouse is: ' + posx + ' Y mouse is: ' + posy );
    } 
</script>

I am noticing that for a fixed point on the image, I am getting different X and Y coordinates on different browsers.

Can anyone tell why this is the case. Thanks

Hard to say without seeing HTML/CSS it could be you have page certain element properties (border, margin, padding, etc.) rendering differently on the page across browsers, resulting in different X,Y positions. — Mike Brant, Sep 24 '12 at 16:47
Anyway you should first compute values relative to image element position. — pronvit, Sep 24 '12 at 16:49
see here http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y — Anton Baksheiev, Sep 24 '12 at 16:50
Thanks Anton, but I want a way so that these values do not change, irrespective of which browser or monitor user is working on. — gunnerz, Sep 24 '12 at 16:58
@gunnerz Different browsers has different default values for margin and padding. If you don't set them the image will not be placed at the same place. You could set an absolute position on the image, or (better) get the offset of the image and subtract that from the coordinates you got, so you have local coordinates of the image. — some, Sep 24 '12 at 17:16

score 1 · Answer 1 · answered Sep 24 '12 at 17:22

you can check all data that you get in your event

 var a = "";
 for (var key in e){ 
     if( typeof e[key]!='function' &&  typeof e[key] !='object' )
     a += key+'='+ e[key]+'\n' 
  }
  alert(a)

this constraction helps you compare margin and padding in browsers

var padding = parseInt($("#imgId").css("padding-top"));

I think you need investigate you code and styles, maybe you have some conflict with padding and margins that influences on you result.

Hope this way helps you.

Image showing different coordinates on different browsers

1 Answers1