Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Holland
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Click location on image in FireFox?

    Hello,
    I want to capture the mouseposition when an image is clicked. I get it in IE like this:
    posx = window.event.offsetX
    posy = window.event.offsetY
    In case off click on the upper left corner of the image, result is posx=0, posy=0.
    This does not work in FireFox. (offsetX and offsetY do not exist ).
    I tried this for handling the onclick event:
    function HandleMapClick(e)
    {
    posx = e.layerX;
    posy = e.layerY;
    }
    However, this seems to give the mouseposition calculated from the upper
    left corner of the browser. I want it from the upper left corner off the image.
    Can anyone help me? Thanks in advance!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Welcome to the Forum!

    Is this what you are looking for?:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    style type="text/css">
    <!--
    body{
    margin-left:0px;
    margin-top:100px;
    }
    -->
    </
    style>
    <
    script type="text/javascript">
    var 
    mX;var mY;
    function 
    checkS(e){// captures the mouse position
    mX 0;mY 0;
    if (!
    e) {var window.event};//IE
    if (e.pageX || e.pageY){//Moz
    mX e.pageXmY e.pageY;
    }
    else if (
    e.clientX || e.clientY){//IE
    mX e.clientX-2mY e.clientY-2;//IE correction
    }
    }
    function 
    showP(obj){
    var 
    oX obj.offsetLeft;var oY obj.offsetTop;
    while(
    obj.parentNode){// finds the absolute position of the object
    oX=oX+obj.parentNode.offsetLeft;
    oY=oY+obj.parentNode.offsetTop;
    if(
    obj==document.getElementsByTagName('body')[0]){break}
    else{
    obj=obj.parentNode;}
    }
    var 
    rX=mX-oX;//relative X
    var rY=mY-oY;//relative Y
    alert('the relative mouse position is: X='+rX+' Y='+rY)
    }
    </script>
    </head>
    <body onmousemove="checkS(event)">
    <img src="00.jpg" border="0" align="right" onclick="showP(this)"> 
    </body>
    </html> 
    As you can see, IE needs a correction of -2:-2 (x:y) pixels, I don't know why..., Bill Gates should know....
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Holland
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    Yes, that is exactly what i need. Many thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •