Veamos un sencillo script para hacer que se mueva un texto por la barra de estado de nuestro navegador.
Vamos a ver en este artículo cómo hacer para que se mueva un texto por la barra de estado de nuestro navegador. Es un script bastante sencillo y también bastante corriente. Sin duda puede resultar fácil tomar el script, copiarnoslo en nuestra página y hacerlo funcionar, pero nosotros vamos a procurar una explicación para que todo quede más claro y entendamos un poco lo que estamos haciendo.
Este script va a crear un texto que se movera de derecha a izquierda por la barra de estado. Se puede ver en la página de ejemplo. Ahora veamos los distintos pasos.
1. Defino unas variables iniciales
El script puede mover el texto que nosotros deseemos y para configurarlo se ha de crear una variable que hemos llamado texto_estado donde introduciremos nuestro texto.
var texto_estado = " Bienvenidos a mi pagina web"
Notemos que se han introducido unos espacios antes que el texto. Son para que se cree un espacio en la barra de estado entre la salida del texto y la entrada de este por el otro lado. El número de espacios en blanco se puede modificar libremente, así como el texto que se muestra.
También será necesario crear una variable llamada posicion donde vamos a guardar la posición del texo en la barra de estado.
var posicion = 0
2. Función para mover el texto
Ahora vamos a ver la función, a la que llamaremos mueve_texto(), que se encarga de mover el texto por la barra de estado. Entender esta función puede ser un poco complejo si no se conoce un poco el lenguaje Javascript. En cualquier caso, podemos también copiarla y pegarla en nuestras páginas aunque no la consigamos entender. Realiza cuatro acciones básicas:
- Mueve la posición actual, actualizando la variable posicion. Si hemos llegado al final de la cadena se vuelve al principio
if (posicion < texto_estado.length)
posicion ++;
else
posicion = 1;
- Crea una cadena a partir del texto original. La cadena creada contiene el texto que hay desde la posición actual hasta el final concatenado al que hay desde el principio hasta la posición actual. Este es el paso que realmente genera el movimiento, porque va cambiando la cadena que luego escribiremos a medida que la posición también cambia.
string_actual = texto_estado.substring(posicion) + texto_estado.substring(0,posicion)
- Escribe la cadena resultante de la operación anterior en la barra de estado.
window.status = string_actual - La función se llama a si misma para continuar el movimiento. Para ello se utiliza una función muy socorrida, setTimeout(), que sirve para ejecutar una sentencia con un retardo de tiempo. La función recibe la sentencia para ejecutar (que en este caso es una llamada a esta misma función) y el número de milisegundos que tiene que esperar para ejecutarla, en este caso 50.
setTimeout("mueve_texto()",50)
La función entera tiene este código:
function mueve_texto(){
if (posicion <
texto_estado.length)
posicion
++;
else
posicion =
1;
string_actual = texto_estado.substring(posicion) +
texto_estado.substring(0,posicion)
window.status =
string_actual
setTimeout("mueve_texto()",50)
}
3. Llamamos a la función
Para empezar a mover el texto por la página tenemos que realizar una llamada a la función que se encarga de ello. Será más claro el código de la página si colocamos la llamada a la función después de que haya sido definida, aunque no es obligatorio.
mueve_texto()
4. Todo junto
Para acabar, podemos observar a continuación el código entero de una página web que mueve texto por su barra de estado. Es una página bastante sencilla después de todo.
<html>
<head>
<title>Texto en
la barra de estado</title>
<script
language="javascript">
//texto del
mensaje
var texto_estado =
"
Bienvenidos a mi pagina web"
var posicion = 0
//funcion para mover el texto de la barra de
estado
function mueve_texto(){
if (posicion <
texto_estado.length)
posicion
++;
else
posicion =
1;
string_actual = texto_estado.substring(posicion) +
texto_estado.substring(0,posicion)
window.status =
string_actual
setTimeout("mueve_texto()",50)
}
mueve_texto()
</script>
</head>
<body>
<h1>Ejemplo de script con un texto
en la barra de estado</h1>
</body>
</html>
Se puede ver el ejemplo en
funcionamiento.
5. Otro ejemplo
Dependiendo del script que utilicemos para mover el texto de la barra de estado conseguiremos unos efectos u otros. A continuación podemos ver un segundo ejemplo sobre cómo mover un texto por la barra de estado utilizando un efecto de movimiento distinto.
No vamos a comentar este segundo ejemplo porque ya se encuentra comentado en el propio código fuente, pero podremos ver que es muy parecido al anterior.
<html>
<head>
<title>Segundo
ejemplo de texto en movimiento</title>
</head>
<body>
<h1>Texto en movimiento en la barra
de estado</h1>
<h2>Ejemplo 2</h2>
<script language="javascript">
//variable con el
texto a mostrar
var texto = "Bienvenidos a mi pagina web!!!"
//variable con la posicion en el texto. poner
siempre a 0
var pos = 0
//creo una funcion para
cambiar el texto de la barra de estado
function textoEstado(){
//incremento la posicion en 1 y extraigo el
texto a mostrar en este momento.
pos = pos +
1
textoActual = texto.substring(0,pos)
//pongo el texto que quiero mostrar en la barra de
estado del navegador
window.status = textoActual
//Llamamos otra vez a esta funcion para que
continue mostrando texto
if (pos ==
texto.length){
//si hemos llegado al
final, vuelvo al principio y hago un retardo superior
pos =
0
setTimeout("textoEstado()",1500)
}
else{
//si no hemos llegado al
final, sigo con la funcion con un retardo
minimo.
setTimeout("textoEstado()",100)
}
}
//llamo a la función para
poner el texto en movimiento
textoEstado()
</script>
</body>
</html>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...