Un div que persigue al raton...

neowebmaster · #1 (**permalink**) 13/08/2004, 15:46

ATENCION

Ya esta solucionado, pero lo dejo aqui pa por si a alguien le interesa saber como se hace :P

Bueno... ^^U Ya que tenia entre manos el codigo de un texto que sigue al raton, intente hacer algo mas sencillo que ese codigo, pero que tb fuera siguiendo al raton, por curiosidad y tal, pero me he hecho un lio @_@ y me salen errores por tos laos o bueno, solo sale un error pero no se ni porque y si cambio cosas salen mas errores.

Este es el codigo, a ver si podeis decirme ande falla ^^UUUUUUU

<html>
<head>
<script type="text/javascript">

function sigueme()
{
var x = (document.layers) ? e.pageX : document.body.scrollLeft
var y = (document.layers) ? e.pageY : document.body.scrollTop
document.getElementById("siguelo").style.left = x + "px";
document.getElementById("siguelo").style.top = y + "px";
setTimeout("sigueme()",20);
}
</script>
</head>

<BODY>
<script type="text/javascript">

if (document.layers) {document.captureEvents(Event.MOUSEMOVE)}

document.onMouseMove=sigueme();
</script>

<div id="siguelo">A</div>

</BODY>
</html>

neowebmaster · #2 (**permalink**) 13/08/2004, 17:27

Que cosas, al final ma acabao saliendo... xDDDDDDDDDD

Este es el codigo final que si funciona:

<html>
<head>
<script type="text/javascript">

function sigueme()
{
//Capto las coordenads del puntero.
var x = window.event.x;
var y = window.event.y;

//Y se las coloco al div.
document.getElementById("siguelo").style.left = x + "px";
document.getElementById("siguelo").style.top = y + "px";
}

</script>
</head>

<BODY onMouseMove="sigueme();">
<div id="siguelo" style="position: absolute; left: 100px; top: 50px;">A</div>
</BODY>
</html>

___________________________________________
Pa quien le interese, el primer fallo y ams esencial recae en que al div no le habia asignado previamente un estilo, entonces, al no tener estilo no podia modificarselo, asiq lo mas importante es colocarle un estilo al div. Luego, si pongo que la funcion se llame a si misma cada X tiempo, da error porque no encuentra el raton si este no esta por la ventana del explorador, asique no hay que poner eso, lo que hay que hacer es que solo se llame a esa funcion si mueve el raton, sino, no la llama. Y luego, el recoger las coordenadas es con eso que pone ahi, aunque he provado lo otro y tb sirve, pero eso es ams sencillo y se entiende mejor :P

Byeeeeeeeeeeee

SiR.CARAJ0DIDA · #3 (**permalink**) 13/08/2004, 21:45

mm esta bueno :P

lo unico que yo le agregaria unos 15 pixeles mas al movimiento el cursor, asi la flechita no te tapa el mensaje

document.getElementById("siguelo").style.left = 15 + x + "px";
document.getElementById("siguelo").style.top = 15 + y + "px";

edit:
mm estuve probando con otras cosas, por ejemplo, que el div siga al raton pero sobre un enlace. el problema es que cuando saco el mouse del enlace el div se queda ahi -_-

y usando "onmouseout" no lo puedo ocultar

neowebmaster · #4 (**permalink**) 14/08/2004, 03:58

Actualizacion...

Bueno, hay algo que he de mejorar del codigo anterior

, resulta, que todo es perfecto si tu pagina no se alarga, ya que si bajas la barra del explorador porque la pagina sea mas larga, el div se queda en la parte de arriba colgado, porque? Sencillo, el raton siempre tendra una posicion relativa a la pantalla que tu estas viendo, de manera que su posicion sera la 800 aunque tu bajes la barra del raton 3000 puntos mas abajo, asique el div se quedara en la posicion 800 arriba del todo, pero, todo tiene solucion... le sumaremos al div el trozo que nos hayamos desplazado con la barrita, q se le llama scroll

Cambiaremos la parte en que recogemos las coordenadas del raton a lo siguiente:

var x = window.event.x+document.body.scrollLeft;
var y = window.event.y+document.body.scrollTop;

Y con eso ahora ya se vendra con nosotros el div alla a donde vayamos ^^

Por otro lado, el cursos se pone en medio y si es texto no nos deja ver... asique como dice el amigo ahi arriba, mejor sumarle algo al div pa que el cursor no quede encima tapando :-p

SiR.CARAJ0DIDA · #5 (**permalink**) 14/08/2004, 17:01

sigo con una duda, muy lindo el div pero en un lugar tiene que guardarse, por ejemplo si quiero que aparezca el div sobre unos links en mi pagina. el div va a estar escondido mientras, pero donde?? osea ocupa espacio -_-

neowebmaster · #6 (**permalink**) 15/08/2004, 07:47

Pos, no se mucho de CSS pero... no habia una propiedad de visible o invisible??? :S
Nose quizas es cosa mia... xDDDDDDDDd (Descubri el CSS hace solo unos dias :S)

SiR.CARAJ0DIDA · #7 (**permalink**) 15/08/2004, 08:16

si, pero aunque este invisible ocupa espacio en el documento, hay alguna forma de que este por encima del texto de la pagina?? o atras?? como es el z-index??

plapapa · #8 (**permalink**) 02/09/2012, 02:19

Yo hice algo muy parecido pero ni este ni el que yo hice funcionan en Firefox 15.0. ¿Alguien tiene idea de como solucionar esto?

Funciona bien en Internet explorer y Google Chrome.

Gracias de antemano.