X Y solo para EXPERTOS

GreyFOX · #1 (**permalink**) 20/12/2010, 15:38

Si tenemos un div de 400 x 400 y una imagen(20x20) que se mueve con el raton gracias al event.clientX y style position absolute en la imagen para poder moverla a tiempo real dentro del div.

El preblema esta cuando queremos obtener la poscion dentro del div mediante margintop y marginleft para guardar esos datos y luego mostrar dicha imagen en la posicion guardada sengun los margintop y marginleft.

Como obtener el margintop y marginleft?

caricatos · #2 (**permalink**) 20/12/2010, 15:53

¡solo para EXPERTOS!

margintop, marginleft...¿?...

¿No será que quiers saber top y left... o client/offset[top/left]

Saludos

GreyFOX · #3 (**permalink**) 20/12/2010, 15:57

bien es otro metodo con el top o left (creo que vspace y hspace tambien podria ser) pero aun asi al colocarle el style absolute el left y top respecto al div, pasan a tener como punto de referencia no el div si no la pagina completa, no se si me explico

caricatos · #4 (**permalink**) 20/12/2010, 15:59

... o cualquier contenedor con posición relativa...

GreyFOX · #5 (**permalink**) 20/12/2010, 16:08

al contenedor al añadir el relative la imagen en vez de estar dentro del div sale y en vez de estar en la poscion x 600 esta en la x 1200

caricatos · #6 (**permalink**) 20/12/2010, 16:22

O sea, que quieres que un experto te ponga una imagen dentro de un div, que no se sabe a ciencia cierta si debe tener un posicionamiento absoluto o relativo (o tal vez fixed, pero no lo liemos más)

... y to'eso sin sabé pa qué...

¡No entiendo!

Saludos

PD: ¿Y el código?

GreyFOX · #7 (**permalink**) 20/12/2010, 16:26

El objetivo es tener un div en el centro de la pagina y poder poscionar una imagen dentro de el con el raton libremente. el problema es que si utlizas x y a secas cuando la resolucione de pantalla es otra, ya no tiene la misma poscion la imagen

gracias por la ayuda

Lo de expertos , lo pongo ya que creo que es un poco complicado el tema

Rolldi · #8 (**permalink**) 21/12/2010, 00:31

Cita:

Iniciado por GreyFOX

El objetivo es tener un div en el centro de la pagina y poder poscionar una imagen dentro de el con el raton libremente. el problema es que si utlizas x y a secas cuando la resolucione de pantalla es otra, ya no tiene la misma poscion la imagen

gracias por la ayuda

Lo de expertos , lo pongo ya que creo que es un poco complicado el tema

El hecho de utilizar clientx y clienty lleva implícito el hecho de que la salida en píxeles será variable según la resolución. Lo que deberías hacer es posicionar la imagen de forma relativa dentro de un div que esté contenido en otro div o una tabla cuyos datos estén especificados de forma relativa (porcentajes).

Esto es:

Código HTML:

Ver original<table width="80%" style="background-color:black"><tr><td>
<div style="float:left; top:100%; left:50%; position:relative; color:white">Contenido</div>
</td></tr></table>

Si modificas el parámetro top y left observarás como cambia su posición con respecto a la tabla. Debes utilizar porcentajes, nunca píxeles.
Un saludo.

GreyFOX · #9 (**permalink**) 21/12/2010, 02:53

Código HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getcoords() {
document.getElementById("coord-x").value = event.clientX + "";
document.getElementById("coord-y").value = event.clientY + "";
}
</script>
</head>
<body onmousemove="getcoords()">
<input id="coord-x" type="text">
<input id="coord-y" type="text">
</body>
</html>

Aqui tenemos un ejemplo , como pasamos a porcentage las cordenadas?¿?¿

muchas gracias por la ayuda

caricatos · #10 (**permalink**) 21/12/2010, 05:28

Hola:

Clarísimo ejemplo de cómo hacer las páginas solo para el explorer...

Por lo de las coordenadas del ratón, hay muchas páginas que lo explican... incluso en nuestras magníficas FAQs, y de pixel a porcentaje...

, me suena a regla de tres...

Saludos