Guardar posición del ratón respecto a la imagen sobre la que se pulsa

pinchu · #1 (**permalink**) 03/08/2010, 13:34

He encontrado por el foro esta función hecha por troyano:

function storepoint(e, objeto)
{
var resx=0
var resy=0
while (objeto.tagName!="BODY")
{
resx+=objeto.offsetLeft
resy+=objeto.offsetTop

objeto=objeto.offsetParent
}
// alert((e.clientX)+', '+(e.clientY));
// alert((resx)+', '+(resy));
//alert('reales'+(e.clientX-resx)+' , '+(e.clientY-resy));
etiqX = e.clientX - resx - 10;
etiqY = e.clientY - resy + 30;
}

Sirve para guardar la posición del ratón al hacer click sobre un elemento. El problema que tengo es que si muevo el scroll de la página hacia abajo y pulso sobre la imagen, la posición guardada no es correcta. Supongo que esto guarda la posición absoluta.¿Cómo puedo retocar la función?

La llamada la realizo así:

//Detectamos cuándo el usuario pulsa sobre una foto para etiquetarla
$('.fotoEtiquetar').live('click', function(evt)
{
//Guardamos la posición de la etiqueta
storepoint(evt,this);
//Mostramos la diana de la etiqueta
var diana = $('#dianaEtiqueta');
diana.css("top",etiqY + "px");
diana.css("left",etiqX + "px");
diana.css("display","block");
});

Gracias

Panino5001 · #2 (**permalink**) 03/08/2010, 13:51

Podés usar esto:

Código PHP:

  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} 
}

Ejemplos: http://disegnocentell.com.ar/notas2.php?id=252
O simplemente usar un input type image y rescatar la posición en el servidor, ejemplo (ver mapa): http://disegnocentell.com.ar/notas2.php?id=242

pinchu · #3 (**permalink**) 04/08/2010, 07:19

panino esa función que me pones me devuelve siempre 0,0. ¿Tendrá que ver que la imagen está dentro de un overlay?

Realmente me funciona mejor la función esa que puse, con el problema que comenté.

¿Alguna idea?

Gracias

Panino5001 · #4 (**permalink**) 04/08/2010, 08:11

No, no tiene que ver con eso. Hay que ver cómo la estás utilizando: he conocido gente que ha usado un Nonius para ajustar tuercas y se ha quejado de que no las ajustaba bien.

pinchu · #5 (**permalink**) 04/08/2010, 08:24

Pues tengo esto:

//Detectamos cuándo el usuario pulsa sobre una foto para etiquetarla
$('.fotoEtiquetar').live('click', function(event)
{
//Guardamos la posición de la etiqueta
storepoint(event);
//Mostramos la diana de la etiqueta
var diana = $('#dianaEtiqueta');
diana.css("top",etiqY + "px");
diana.css("left",etiqX + "px");
diana.css("display","block");
});

y tu función:

function storepoint(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}
alert(posX + ',' + posY);
}

Gracias por la ayuda

Adler · #6 (**permalink**) 04/08/2010, 08:28

Cita:

Iniciado por panino5001

he conocido gente que ha usado un nonius para ajustar tuercas y se ha quejado de que no las ajustaba bien.

:-d:-d

Panino5001 · #7 (**permalink**) 04/08/2010, 08:38

No tengo idea qué hace live ni lo otro que estás usando, pero así, a la antigua, funciona sin problemas:

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=iso-8859-1" /> 
<title>Documento sin título</title> 
<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}  
}   
onload=function(){ 
    document.getElementById('pp').onclick=function(e){ 
        var pos=getPos(e); 
        alert(pos.x+','+pos.y); 
    } 
} 
</script> 
</head> 
 
<body> 
<img id="pp" src="img2/1.jpg" width="500" height="332" /> 
</body> 
</html>

pinchu · #8 (**permalink**) 05/08/2010, 05:30

Nada, no soy capaz a que me funcione... me devuelve 0,0

Gracias de todos modos

pinchu · #9 (**permalink**) 06/08/2010, 02:39

Al final he hecho esta función para el que le interese:

function posEtiqueta(evento,contenedor)
{
var ie = navigator.userAgent.toLowerCase().indexOf('msie')! =-1;
var cont = document.getElementById(contenedor);

var posicionContenedorLeft = cont.offsetLeft;
var posicionContenedorTop = cont.offsetTop;

if(ie)
{
coordenadaX = evento.clientX + document.body.scrollLeft - posicionContenedorLeft;
coordenadaY = evento.clientY + document.body.scrollTop - posicionContenedorTop;
}
else
{
coordenadaX = evento.pageX - posicionContenedorLeft;
coordenadaY = evento.pageY - posicionContenedorTop;
}

return {x:coordenadaX - 20,y:coordenadaY - 65,dianax:coordenadaX - 5, dianay:coordenadaY - 5}
}