Hacker of the Web
Tus ideas en código!...y mas

Texto que persigue al cursor

Puede ser cualquier frase, la que tu quieras!!. únicamente texto, solo es necesario agregar un gadget HTML/Javascript. Lo puedes agregar donde quieras, ya que este no mostrará nada mas, solo hará que se vea nuestro texto destras del cursor.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[1] Una vez agregado el gadget coloca este código dentro de él:

+/- Mostrar Código
<script language="JavaScript" type="text/javascript">

mensaje = 'Chivas es el equipo mas querido de México';
font = 'Arial';
size = 2;
color = 'red';
velocidad = 0.8;


n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);


mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);


function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;

</script>


[2] Despues de agregarlo que te parece si lo editamos un poco, es muy facil. Solo pon en el código rojo lo que quieras que se vea en la pantalla.

mensaje = 'Aqui el mensaje que tu quieras';
font = '(Arial, Verdana, Helvetica, Comic Sans MS)';//Aqui el tipo de letras
size = 2;//Aqui el tamaño de la letra
color = 'red';//Aqui el color del texto: red, white, black, blue, green
velocidad = 0.8;//Aqui la velocidad con que se mueven


Con esto tendrás al mensaje persiguiendo al mouse!!!
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

6 comentarios !

Nexxxo dijo...

no sale el codigo carnal... le doy en mostrar codigo y no aparece nada :(

SäNTÿ dijo...

Nexxxo, Gracias !!

Esta resuelto

LERE dijo...

Muchas gracias por toda la información colgada, somos universitarias de publicidad y nos han mandado realizar un blog...y tus explicaciones nos han sido de gran ayuda!!! Por eso (y si no te importa) pondremos un enlace de tu bog en el nuestro para que la gente te visite.
Un saludo, tus fieles seguidoras!
EMSR

LERE dijo...

Hola somos universitarias de publicidad y nos han mandado realizar un blog... asique ahoran os toca decirte que...Muchas gracias por todas tus explicaciones, nos has sido de gran aydua!!
Si no te importa colocaremos un enlace a tu blog para que mis compañeros te visiten
Un saludo.
Tus fieles seguidoras

SäNTÿ dijo...

LERE, que bien que les sirva ;)!!

Y claro que no me importa, puedes poner el enlace donde prefieras :P.

Saludos y buen dia!

LERE dijo...

¡Ya estas aceptado en nuestro blog!, aquí te dejo el enlace por si te interesa;)
wwww.lamejorapuestaempresarial.blogspot.com
¡Un saludo!, ya te visitaremos más que es intersante toda la información que nos proporcionas


Página Principal
Arriba