SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to find the position of coordinate on clicked position ?

    hello forums!!
    I am wondering to know -
    how to find the position of coordinate on clicked position ? using javascript.

    Case:
    Suppose i had a image ,when mouse is clicked @ certain position of image, then it should alert the x & y coordinate of that point..

    Awaiting for your great help..
    Thanks in advance to all of you

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.hotspot.freeserve.co.uk/s...tive/?mousepos
    http://webdeveloper.com/forum/showthread.php?t=151280

    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <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">
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    posx=ev.clientX+document.body.scrollLeft;
    posy=ev.clientY+document.body.scrollTop;
    }
    else{return false}//old browsers
    alert('X='+posx+' Y='+posy) ;
    }
    //document.onmousemove=getMouse
    </script>
    </head>
    <body>
    <img src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="getMouse(event)">
    
    </body>
    </html>
    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    function Show(e)
    {
    var ev=(!e)?window.event:e;//IE:Moz
         
    x = ev.clientX + document.body.scrollLeft || ev.pageX + window.pageXOffset || ev.clientX + document.documentElement.scrollLeft;
        
    y = ev.clientY + document.body.scrollTop  || ev.pageY + window.pageYOffset  || ev.clientY + document.documentElement.scrollTop ;
    
    alert("X = "+x+" Y = "+y);
    
    }
    </script>
    </head>
    <body style="margin:0">
    <img src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="Show(event)">
    Click somewhere in the image. An alert box will alert the x and y coordinates of the cursor.
    </body>
    </html>
    Last edited by muazzez; Jun 14, 2007 at 08:36.

  3. #3
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    knock knock !!
    but the clicked coordinates for the same position are different for different resolutions..How to avoid such problems...
    thanks in advance to all of you
    Awaiting for the valueable help

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For first code
    offsetTop and offsetLeft are 8 in Opera and Firefox. But it is 0 in İnternet Explorer.
    Code:
       
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <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">
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    posx=ev.clientX+document.body.scrollLeft;
    posy=ev.clientY+document.body.scrollTop;
    }
    else{return false}//old browsers
    alert('X='+posx+' Y='+posy) ;
    
    var el = document.getElementById('imgid');
    alert("left : "+el.offsetLeft+"   \n top : "+el.offsetTop)
    }
    
    </script>
    </head>
    <body>
    <img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="getMouse(event)">
    
    </body>
    </html>
    For second code
    offsetTop and offsetLeft are 0 in Opera, Firefox and İnternet Explorer.
    Code:
      
    <html>
    <head>
    <script type="text/javascript">
    function Show(e)
    {
    var ev=(!e)?window.event:e;//IE:Moz
         
    x = ev.clientX + document.body.scrollLeft || ev.pageX + window.pageXOffset || ev.clientX + document.documentElement.scrollLeft;
        
    y = ev.clientY + document.body.scrollTop  || ev.pageY + window.pageYOffset  || ev.clientY + document.documentElement.scrollTop ;
    
    alert("X = "+x+" Y = "+y);
    var el = document.getElementById('imgid');
    alert("left : "+el.offsetLeft+"   \n top : "+el.offsetTop)
    }
    </script>
    </head>
    <body style="margin:0">
    <img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="Show(event)">
    Click somewhere in the image. An alert box will alert the x and y coordinates of the cursor.
    </body>
    </html>
    I write
    <body style="margin:0">
    instead of
    <body>
    to first code.
    offsetTop and offsetLeft will be 0 in Opera, Firefox and İnternet Explorer.
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <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">
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    posx=ev.clientX+document.body.scrollLeft;
    posy=ev.clientY+document.body.scrollTop;
    }
    else{return false}//old browsers
    alert('X='+posx+' Y='+posy) ;
    
    var el = document.getElementById('imgid');
    alert("left : "+el.offsetLeft+"   \n top : "+el.offsetTop)
    }
    //document.onmousemove=getMouse
    </script>
    </head>
    <body style="margin:0">
    <img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="getMouse(event)">
    
    </body>
    </html>
    I update first code. I use position:absolute;
    Code:
      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <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">
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    
    			if(document.documentElement){//IE 6+ strict mode
        	posx = ev.clientX + document.documentElement.scrollLeft;
        	posy = ev.clientY + document.documentElement.scrollTop;
    			}
    			else if(document.body){//Other IE
        	posx = ev.clientX + document.body.scrollLeft;
        	posy = ev.clientY + document.body.scrollTop;
    			}
    }
    else{return false}//old browsers
    alert('X='+posx+' Y='+posy) ;
    var el = document.getElementById('imgid');
    alert("left : "+el.offsetLeft+"   \n top : "+el.offsetTop) // left: 50   top: 100 
    }
    </script>
    <style type="text/css">
    .myclass {
       position:absolute;
        left:50px;
        top:100px;
    }
    </style>
    </head>
    <body>
    <img class="myclass" id="imgid" src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="getMouse(event)">
    
    </body>
    </html>
    If I use position:relative;
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <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">
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    
    			if(document.documentElement){//IE 6+ strict mode
        	posx = ev.clientX + document.documentElement.scrollLeft;
        	posy = ev.clientY + document.documentElement.scrollTop;
    			}
    			else if(document.body){//Other IE
        	posx = ev.clientX + document.body.scrollLeft;
        	posy = ev.clientY + document.body.scrollTop;
    			}
    }
    else{return false}//old browsers
    alert('X='+posx+' Y='+posy) ;
    var el = document.getElementById('imgid');
    alert("left : "+el.offsetLeft+"   \n top : "+el.offsetTop)
    }
    </script>
    <style type="text/css">
    .myclass {
        position:relative;
        left:50px;
        top:100px;
    }
    </style>
    </head>
    <body>
    <img class="myclass" id="imgid" src="http://www.sitepoint.com/forums/image.php?u=101911&dateline=1168563793" onclick="getMouse(event)">
    
    </body>
    </html>
    offsetTop and offsetLeft will be different in browsers.


Bookmarks

Posting Permissions

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