minimum x-coord of an image when clicked

Discussion in 'Javascript' started by optimistx, Feb 1, 2005.

  1. optimistx

    optimistx Guest

    When we click an image, we get the coordinates x and y in the event
    handler, like this

    <script type="text/javascript">
    function fun2(evnt){
    var e=evnt;
    if (e==undefined){e=event;}
    var x=e.x || e.layerX;
    var y=e.y || e.layerY;
    alert('x='+x+' y='+y';
    return true;
    }
    </script>

    ....

    <img src="test.jpg" onclick="fun2(event)" />

    How to determine minimum x and minimum y in my script?

    Thanks in advance!
     
    optimistx, Feb 1, 2005
    #1
    1. Advertising

  2. optimistx

    Fred Oz Guest

    optimistx wrote:
    > When we click an image, we get the coordinates x and y in the event
    > handler, like this
    >
    > <script type="text/javascript">
    > function fun2(evnt){
    > var e=evnt;
    > if (e==undefined){e=event;}
    > var x=e.x || e.layerX;
    > var y=e.y || e.layerY;
    > alert('x='+x+' y='+y';
    > return true;
    > }
    > </script>


    Is this OK? Works in IE, Safari and Firefox:

    <script type="text/javascript">
    function fun2(evnt){
    var e = evnt || window.event;

    // I think the following line should be
    // var ele = e.target || e.srcElement;
    // for older IE but I can't test it right now
    var ele = e.target;
    var x = e.x || e.layerX;
    var y = e.y || e.layerY;

    var msg = [' Element clicked on: ' + ele.nodeName ,
    ' ' + ele ,
    '\n Click location (x,y) = ' ,
    '(' + x + ',' + y + ')',
    '\n offsetWidth = ' + ele.offsetWidth ,
    '\n offsetHeight = ' + ele.offsetHeight ,
    '\n offsetTop = ' + ele.offsetTop ,
    '\n offsetLeft = ' + ele.offsetLeft ,
    '\n offsetParent = ' + ele.offsetParent ,
    '\n offsetParent offsetTop = ',
    ele.offsetParent.offsetTop ,
    '\n offsetParent offsetLeft = ' ,
    ele.offsetParent.offsetLeft ];

    alert(msg.join(''));
    }
    </script>


    [...]
    > How to determine minimum x and minimum y in my script?


    Exactly what do you mean by "minimum x and minium y"? If you
    mean the position of the top left corner of the element clicked
    on, then its position must be calculated carefully as each
    browser handles it differently. Search through this newsgroup
    for offsetParent.

    There is a good discussion of the viewport, its properties and
    browser support here:

    <URL:http://www.quirksmode.org/js/>

    Click on the viewport link - hope that helps.

    --
    Fred
     
    Fred Oz, Feb 1, 2005
    #2
    1. Advertising

  3. optimistx

    optimistx Guest

    Fred Oz wrote:

    >
    > There is a good discussion of the viewport, its properties and
    > browser support here:
    >
    > <URL:http://www.quirksmode.org/js/>
    >
    > Click on the viewport link - hope that helps.
    >

    Thanks Fred,

    that was exactly what was needed. A marvellous, useful site. You guessed
    the top/left corner thingy right, too.
     
    optimistx, Feb 1, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    4
    Views:
    596
  2. Replies:
    1
    Views:
    405
    Andrew Thompson
    Oct 28, 2006
  3. rajmgopal

    Image Button when clicked displays cross-hairs

    rajmgopal, Oct 27, 2006, in forum: ASP .Net Mobile
    Replies:
    0
    Views:
    733
    rajmgopal
    Oct 27, 2006
  4. Martin

    How to get X,Y coord's like "ismap" ?

    Martin, Aug 21, 2004, in forum: Javascript
    Replies:
    12
    Views:
    246
    Harag
    Aug 23, 2004
  5. deepsnow
    Replies:
    2
    Views:
    91
Loading...

Share This Page