Cómo poner un texto que persigue al puntero del ratón


Si quieres que en tu blog de blogger aparezca un texto que persiga al cursor del ratón tan sólo debes copiar el siguiente script en Diseño -> Elementos de página -> Añadir un gadget (no os preocupéis porque no aparecerá como un gadget)


<script language="JavaScript" type="text/javascript">
mensaje = 'EL TEXTO QUE QUIERAS';
font = 'Verdana,Arial';
size = 3;
color = 'black';
velocidad = 0.7;

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>


Mira un ejemplo de cómo quedan unas palabras que persiguen al ratón.


Gracias una vez más al compañero El Potro.

10 comentarios:

  1. no entendi lo podrias explicarte mejor, no entendi lo porque copio el codigo y lo pego en un gagest pero no sale el texto. plis explica mejor el post

    ResponderEliminar
  2. Hola. Te recomiendo que tengas un blog de pruebas para probar este tipo de trucos.

    Debes copiar todo ese código, siguiendo los pasos descritos en la entrada, en un gadget HTML/Javascrip, da igual donde lo coloques porque aparecerá después de guardar los cambios.

    Un saludo, coméntame a ver cómo te ha ido.

    ResponderEliminar
  3. Yo lo copio y pego, pero no me sale.
    tnego que cambiar algo?

    ResponderEliminar
  4. Hola Ayacuyito. Por lo que me cuentas, parece que en tu blog hay algún script que hace que no funcione este "truco".

    En breve publicaré otro script alternativo a este para soluciona a quien no les funcione el código de esta entreda.

    Estáte atento al blog. Un saludo y disculpa las molestias.

    ResponderEliminar
  5. Hola. Te felicito por tu página.Me han gustado todos los trucos y los he realizado en mi blog. Tuve problemas con el texto en el puntero porque me sale muy lejos. Agradezco de antemano toda la ayuda posible para mejorar este error. Gracias.

    ResponderEliminar
  6. A los que no os funcione probad con el siguiente código. Ponedlo antes de /head

    <script language='javascript' type='text/javascript'>
    //Cursor con texto en movimiento

    //<![CDATA[
    var x,y
    var tempo = 10
    var espera = 0

    var texto = "Aquí va tu texto"

    texto = texto.split("")

    var xpos = new Array()
    for (i = 0; i <= texto.length - 1; i++) {
    xpos[i] = -50
    }
    var ypos = new Array()
    for (i = 0; i <= texto.length - 1; i++) {
    ypos[i] = -50
    }

    function seguir(e){

    //si no es NS4, usa objeto window.event
    if (!e) var e = window.event

    //NS4
    if (e.pageX || e.pageY) {
    x = e.pageX
    y = e.pageY
    window.status = x + ' : ' + y
    //IE y compatibles con DOM
    } else if (e.clientX || e.clientY) {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
    window.status = x + ' : ' + y
    //no soportado, no hace nada
    } else {
    return
    }

    espera = 1
    }

    function animar_cursor() {

    if ( espera == 1 ) {
    for ( i = texto.length - 1; i >= 1; i--) {
    xpos[i] = xpos[i-1] + tempo
    ypos[i] = ypos[i-1]
    }
    xpos[0] = x + tempo
    ypos[0] = y
    }

    //para el IE 4.x
    if ( espera==1 && document.all ) {
    for (i = 0; i <= texto.length - 1; i++) {
    var letra = eval("span" + i + ".style")
    letra.posLeft = xpos[i]
    letra.posTop = ypos[i]
    }
    }
    //para el Netscape 4.x
    else if ( espera==1 && document.layers ) {
    for (i = 0; i <= texto.length - 1; i++) {
    var letra = eval("document.span" + i)
    letra.left = xpos[i]
    letra.top = ypos[i]
    }
    }

    //para navegadores compatibles DOM
    else if ( espera==1 && document.getElementById ) {

    for (i = 0; i <= texto.length - 1; i++) {
    var letra = document.getElementById( "span" + i)

    letra.style.left = xpos[i] + 'px'
    letra.style.top = ypos[i] + 'px'
    }
    }

    var timer = setTimeout("animar_cursor()", 30)
    }

    if (document.layers)
    document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = seguir
    //]]>
    </script>
    <style type='text/css'>
    .cursoranimado {
    position:absolute;
    visibility:visible;
    top:-50px;
    font-size:11pt;
    font-family:Arial;
    font-weight:bold;
    color:red;
    }
    </style>
    <script language='javascript' type='text/javascript'>
    //<![CDATA[
    if (document.layers) {
    for (i=0;i<=texto.length-1;i++) {
    document.write('<span id="span' + i + '" class="cursoranimado">')
    document.write(texto[i])
    document.write('</span>')
    }
    } else if (document.all || document.getElementById) {
    for (i=0;i<=texto.length-1;i++) {
    document.write('<div id="span' + i + '" class="cursoranimado">')
    document.write(texto[i])
    document.write('</div>')
    }
    }
    animar_cursor()
    //]]>
    </script>

    ResponderEliminar
  7. el codio me funciona pero las letras se me van para el lado

    ResponderEliminar