|
|
Creamos dos botones, ambos invocan la función statbar(txt).El 'txt' en los
paréntesis muestra que la función toma una variable. (Llamé esto
txt, pudo haber sido algo totalmente diferente). Cuando se estudia el tag <form>,
donde se crean los botones, puede ver que la función statbar(txt) es invocada.
Pero allí no escribimos txt. Solo escribimos el texto que queremos que nos
muestre la barra de estado. Se puede ver de esta manera: la función es invocada
y define la variable txt esta toma el valor ('value') que se puso después del
llamado de la función. De esta forma cuando se oprime el boton 'Escribir!', la
función statbar(txt) es invocada y txt conserva el valor ('string') 'Hola! esta
es la barra de estado!'. Ahora se puede usar la variable txt muy usualmente. Este
método de otorgar variables a las funciones las hace muy flexibles. Observe el
segundo botón. Este invoca la misma función, si no tuvieramos la variable,
necesitariamos dos funciones diferentes.
Usted ya sabe que la propiedad onMouseOver de la parte dos de este tutorial:
Ensaye el siguiente script
aquí.
Sólo mueva el puntero sobre él no haga click!
Esto es realmente puro, solo mire la fuente y verá que es más fácil
de lo que se ve a primera vista.
Usted reconocerá muchas partes de este script. La función moveover(txt) es solo
la función statbar(txt) después de algún trabajo de copiar y pegar sobre
ella! Algo similar sucede con la función erase(). En el <body> de la página
de HTML creamos un link con la ya conocida propiedad onMouseOver. Nuestra función
moveover(txt) es invocada con la string 'Desapareciendo!' pasándola por encima de la
variable txt. El window.status toma los contenidos de txt. Lo mismo que la función
statbar(txt). Aunque la invocaciónde la función setTimeout(...) is nueva. Esta
funció configura un tiempo de finalización. Quién estaba esperando eso?
La funció setTimeout(...) define una hora de arranque y una hora de finalización.
En nuestro ejemplo la función erase() es invocada después de 1000 milisegundos
(un segundo). Esta es una característica fantástica! Su función
moveover(txt) termina luego de que el tiempo es configurado.El browser invoca la función
erase() automaticamente luego de un segundo. (Todavía sigue pensando en una página
que diga al usuario:Cuando usted no haga esto su disco duro será destruido en 10
segundos! ???)
Como usted ya sabe como escribir cosas en la barra de estado y como trabaja la función
setTimeout, le será fácil de entender el scroller.
Presione este botón para ver mi scroller. El script debe cargarse desde el servidor.
Así que sea paciente si no lo ve inmediatamente.
Un vistazo al script:
Este script usa las mismas funciones (o parte de ellas) que usamos antes. El setTimeout(...)
le dice al 'timer' que invoque la función scroll() cuando el tiempo es el justo.
El scroller se moverá un paso mas adelante. Al comienzo hay muchos cálculos
pero esto no es muy importante para saber como funciona el script. Los cálculos
se hacen para determinar la posicióon donde el scroller debe arrancar. Si se ubica
solo al comienzo se deben poner unos espacios en blanco para ubicar el texto
correctamente.
Yo le dije al comienzo de mi introducción que los scrollers no son muy populares,
o que si ellos aún son populares, no lo serán por mucho tiempo. Existen
muchas razones, aquí menciono algunas, pero son muchas más.
Existen muchas otras rutinas por ahí en la red. He visto algunos
scrollers escribiendo texto en un frame. Programar esto debe ser un poco
o muy difícil.
Ahora quiero mostrarle como escribir cosas en la barra de estado, (la barra enla parte
inferior de su browser donde se ven las URL's) y porsupuesto explicaré como
trabaja un scroller -aunque ellos ya son odiados en la escena del JavaScript (mas adelante
les diré por que-
Primero, cómo se referencia la barra de estado? Este script muestra como se puede
escribir un simple texto en la barra de estado:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Escribir!" onclick="statbar('Hola! esta es la barra de estado!');">
<input type="button" name="erase" value="Borrar!" onclick="statbar('');">
</form>
</body>
</html>
Ahora qué hace la función statbar(txt)? Bueno, esto es simple. Usted solo
escribe los contenidos de txt a la variable window.status. Esto es hecho por
window.status = txt;. Escrbiendo un valor nulo ('') hace que la barra se borre.
Note que tenemos que usar las comillas simples ' porque usamos comillas dobles " para
definir onClick. El browser necesita saber a quien le pertenecen las comillas, por eso
se tiene que alternan con comillas sencillas y dobles. Creo que esto está
completamente calro.
<a href="tpage.html" onMouseOver="window.status='Otro link estupido...';
return true">
No se molesta porque la barra de estado no borra el texto cuando el puntero del mouse
no se apunta alli mucho tiempo? Tengo una solución bastante simple. Escribimos
una función que usa la misma técnica para borrar la barra de estado mostrada
arriba. Pero cómo podemos invocar la función de borrado? No tenemos una
propiedad o un método para detectar si el mouse se está moviendo sobre un
link. Instalando un 'timer' es la solución.
<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Desapareciendo!');return true;">
link</a>
</body>
</html>
Luego de que el tiempo de finalización a concluido, el tiempo de inicio no arranca de
nuevo, claro que se puede invocar otra vez con la función erase(). Esto nos lleva
directamente a los scrollers que todos queremos.
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="Aqui va el mensaje, los visitantes de su pagina "+
"la veran por horas totalmente fascinados...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Aqui va su super pagina!
</body>
</html>
Si usted ve este efecto por primera vez es completamente fascinante; pero cuando lo ve
por diezmillonésima vez, no es tan divertido. Bueno esto no es un buen
argumento además puede que esté afectando algún truco usado en
sus páginas.
Existen varios problemas. Lo que yo quiero es que la velocidad no cambie cuando se
mueva el mouse (se acelera!). Por lo menos eso me sucede a mi.
Este efecto se torna mas fuerte cuando se desea hacer un scroller un poco
rápido cambiando el valor de 'setTimeout'. Debe ser que hay algo de
esto relacionado con este problema. Pero lo peor es que si usted deja
este script corriendo por mucho tiempo un error: memoria insuficiente.
Esto es realmente horrible, parece ser un problema de Netscape Navigator 2.0.
Talvez la versión 2.01 tenga este problema solucionado.
Last changed: 25.Feb.96
Traducción y adaptación:
J. Mauricio Cuenca Hernández.
© 1996 by Stefan Koch