Coordernadas en un div

salbatore · #1 (**permalink**) 27/10/2008, 04:18

Hola, foreros!:

Tengo un div de 500px por 500px, busco que cuando el usuario clique en algun punto de él se ejecute una accion con las coordenadas del punto donde ha clicado.

¿Como lo debo hacer?

caricatos · #2 (**permalink**) 27/10/2008, 04:36

Hola:

Hace algún tiempo tuve la idea de "destripar" los eventos, y puedes verlos en esta página: Destripar evento... la verdad es que está la página algo descuidada, pero se pueden ver cosas que tal vez te interesen... y no estoy seguro de que se contemple el sitio exacto donde se pincha... aunque en ff se ven atributos como screenX/Y o layerX/Y, etc.

Pero si quieres algo fiable, podrías asociar ese div a una imagen transparente de las mismas dimensiones en un formulario que sea type="image"... que en el momento de enviar el form se añaden las coordenadas de donde se pincha... por ejemplo puedes enviarlo a un iframe, y en ese iframe poner una instrucción window.onload que entregue esas coordenadas a la página padre (parent)...

Es algo rebuscado, pero creo que siempre que esté javascript activado va a funcionar (pero no se trata de código accesible...)

Saludos

Panino5001 · #3 (**permalink**) 27/10/2008, 06:01

Exacto lo que dice caricatos

Sólo agrego que para Explorer es offsetX y offsetY, y que si la posición de la capa no es relativa (o absoluta -esto no lo probé-) puede producir resultados diferentes en algunos navegadores.:

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&iacute;tulo</title>

<script>

function addEvent(o,t,f){

    if(o.addEventListener){

        o.addEventListener(t,f,false);

    }else if(o.attachEvent){

        var ff=function(){

            f.call(o,window.event);

        }

        o.attachEvent('on'+t,ff);

    }

}

function getPos(e){

e=e || window.event;

posX=e.layerX || e.offsetX;

posY=e.layerY || e.offsetY;

return {x:posX,y:posY}

}

function inLog(e){

var t=getPos(e);

document.getElementById('log').innerHTML='x:'+t.x+', y:'+t.y;

}

onload=function(){

    addEvent(document.getElementById('pp'),'mousemove',inLog);

}

</script>

</head>

 
<body><br />

<br />

<br />

<br />

<br />

 
<div id="pp" style="background-color:#F00; width:500px; height:500px; position:relative"></div>

<div id="log"></div>

</body>

</html>