Ubicación del cursor

Shaito · #1 (**permalink**) 16/10/2011, 15:49

Hola!

Me gustaría saber como se puede saber en que posición está el ratón sobre un elemento.

La idea es que, al clicar el ratón sobre una imagen o elemento se sepan las coordenadas sobre esa imagen del ratón, para hacer un sistema similar al etiquetado.

Cualquier enlace con información se agradece ;)

Espero que me puedan ayudar, un saludo.

Panino5001 · #2 (**permalink**) 16/10/2011, 19:28

Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>coordenadas imagen</title> 
<style> 
*{ margin:0; padding:0; font-size:10px; color#666; font-family:Verdana, Arial, Helvetica, sans-serif} 
img{cursor:crosshair} 
</style> 
<script> 
function getPos(e){ 
    var ev=e || window.event; 
    var obj=ev.target || ev.srcElement; 
    obj.style.position='relative';  
    posX=ev.layerX || ev.offsetX || 0; 
    posY=ev.layerY || ev.offsetY || 0; 
    return {x:posX,y:posY} 
}  
</script>   
</head> 
 
<body> 
<img src="img/38.jpg" width="400" height="400" onmousemove="var pos=getPos(event);document.getElementById('log').innerHTML='x: '+pos.x+', y: '+pos.y" /> 
<div id="log">pase el mouse sobre la imagen</div> 
</body> 
 
</html>

Y quizá te interese ver esto:
http://www.forosdelweb.com/3951573-post4.html

sahch · #3 (**permalink**) 16/10/2011, 22:35

Hola tejo la solución a continuación, no creo que necesite mayor explicación ya que es bastante simple, pero si no es así por favor dímelo para poder ser realmente de ayuda ;)

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            
            obtenerCoordenadasOnmousemove = function ( event ) {
                document.getElementById('info-onmousemove').innerHTML =  'on mouse move: ' + obtenerPosClickX(event, 'cuadrado') + ' X ' + obtenerPosClickY(event, 'cuadrado');
            }
            
            obtenerCoordenadasOnclick = function ( event ) {
                document.getElementById('info-onclick').innerHTML =  'on click: ' + obtenerPosClickX(event, 'cuadrado') + ' X ' + obtenerPosClickY(event, 'cuadrado');
            }
            
            obtenerPosClickX = function ( event , id ) {
        
                var cursorX = event.clientX;
                
                var ubicacionX = document.getElementById( id ).offsetLeft;
        
                var posicionInternaX = cursorX - ubicacionX + window.scrollX;
        
                return posicionInternaX;
        
            }
    
            obtenerPosClickY = function ( event , id ) {
        
                var cursorY = event.clientY;
                
                var ubicacionY = document.getElementById( id ).offsetTop;
        
                var posicionInternaY = cursorY - ubicacionY + window.scrollY;
        
                return posicionInternaY;
        
            }
        </script>

        <style>

            #cuadrado {                
                height: 300px;
                width: 300px;
                background: #009933;
            }

        </style>
    </head>
    <body>
        <div id="cuadrado" onmousemove="obtenerCoordenadasOnmousemove(event)" onclick="obtenerCoordenadasOnclick(event)"></div>
        <div id="info-onmousemove">on mouse move: </div>
        <div id="info-onclick">on click: </div>
    </body>
</html>

Algo para tener muy en cuenta, este código te da la ubicación del click y el mouse dentro del div, pero también existen otras posibilidades como la ubicación en pantalla , en el body, y teniendo en cuenta el scroll o no...

Shaito · #4 (**permalink**) 17/10/2011, 09:23

Hola!

Muchas gracias a ambos ;)

Y especialmente a sahch, tu código me ayuda mucho con el problema de como pasarlo a variables de php!

Un saludo y gracias

sahch · #5 (**permalink**) 17/10/2011, 11:42

:) Estamos para servirle, me alegra que fuera de ayuda...