Sección "Java Scripts"

Lección 58

Palabras siguen al cursor 

Este Script hace que un texto siga al cursor, para activarlo, pegas este código en cualquier sector de tu sitio, pero siempre debajo de donde dice <Head> en el HTML de tu página:

<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
font-weight:bold;
color:black;
}
</style>
<script>

var x,y
var step=20
var flag=0

/* Editar mensaje. Importante: no te olvides el espacio al final de la oración!!! */
var message="TuSitio.com "
message=message.split("")

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

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

function handlerMM(e){
x = (document.layers) ? e.pageX : 
document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : 
document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}

else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}

</script>

Lo que pinté con rojo es el texto que seguirá al cursor, lo modificas a gusto.  

Y esto otro pegas en <Body> en el HTML de tu página: (recuerda que para pegar este código debes borrar la etiqueta <Body> y colocar esto en reemplazo)

<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
<script>
<!--

for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// -->
</script>

 

 

Y aquí lo tienes al mismo archivo, listo para cortar y pegar en tu página:

Para ello haces click en cualquier palabra que se halla dentro de la caja, Te diriges a "Edición" en el menú superior de la barra de herramientas, e indicas "Seleccionar todo", luego tomas lo seleccionado dirigiéndote nuevamente a "Edición", pero esta vez indicas "Cortar", y posteriormente te posicionas en tu página, donde quieres colocar este código, entonces te diriges a Edición, y le indicas "Pegar". 

Si deseas hacer las cosas más rápido, puedes verificar en "Edición" (está escrito al lado de las palabras que indican cada orden) que pulsando "Control" + una letra determinada, puedes "seleccionar todo", "cortar" o "pegar" en forma instantánea y con eso evitas tener que ingresar constantemente al menú de "Edición".

Esto es lo que debes pegar debajo de donde dice <Head> en el HTML de tu página:

Esto es lo que debes pegar debajo de donde dice <Body> en el HTML de tu página: