|
Existen muchas formas de mostrar un mensaje en la barra de estado del navegador. Se puede mostrar de manera estática o con movimiento. Este último tipo también puede ser de otras muchas formas, desplazándose hacia la derecha, izquierda, apareciendo, letra a letra...
En primer lugar voy a mostrar como se puede escribir un texto estático cualquiera en la barra de estado. Para ello es necesario agregar la siguiente propiedad a la etiqueta <body>:
<body onLoad="window.defaultStatus=' Aqui puedes poner cualquier texto. ';return true" >
El evento onLoad se ejecuta al finalizar la carga de la página y, en este caso, se define el texto predeterminado de la barra de estado.
Esto se puede 'complicar' un poco más, haciendo que el texto de la barra de estado cambie cuando pasemos el ratón por un hipervinculo. Esto quedaría de la siguiente forma:
<html>
<head>
<title>Efecto 1</title>
<body onLoad="window.defaultStatus=' Aqui puedes poner cualquier texto. ';return true" >
<a href="loquesea.htm" o nMouseOver="window.status=' Esto es un ejemplo ';return true"> Pasa el raton por aqui </a>
</body>
</head>
</html> |
En este ejemplo utilizamos el evento onMouseOver , que no hace otra cosa más que detectar si el ratón pasa por encima del objeto indicado (enlace, imagen...)
Ahora, vamos a ver algunos ejemplos de texto animado en la barra de estado.
El primero es el más simple, puesto que el texto se muestra de derecha a izquierda y sin realizar ningún efecto especial...
<html>
<head>
<title>Efecto 2</title>
<script language="JavaScript">
<!--
var scrtxt=" Aqui va el mensaje que quieras mostrar ";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function barraestado() {
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(" barraestado() ",150);
}
//-->
</script>
</head>
<body onLoad =" barraestado() ;return true;">
Aqui va el resto de tu página...
</body>
</html>
|
En este script, si cambiamos window.status por document.title conseguiremos que el mensaje animado aparezca en la barra de titulo, este 'truco' se puede aplicar en la mayoría de los scripts de este tipo.
El siguiente efecto es un poco más complicado que el anterior, puesto que el texto no solo se desplaza de derecha a izquierda sino que también realiza otros efectos.
<html>
<head>
<title>Efecto 3</title>
<title>Mensaje</title>
</head>
<body onload=" barra() ">
<script language="JavaScript">
var velocidad = 2
var pausa = 1250
var timerID = null
var caminando = false
var ar = new Array()
ar[0] = " Aqui puedes mostrar varios mensajes "
ar[1] = " "
ar[2] = " www.pagina.de/fuikas "
ar[3] = " "
ar[4] = " Esto lo puedes cambiar "
var mensaje = 0
var estado = ""
borrarestado()
function parar() {
if (caminando)
clearTimeout(timerID)
caminando = false
}
function barra() {
parar()
empezar()
}
function borrarestado() {
estado = ""
for (var i = 0; i < ar[mensaje].length; ++i) {
estado += "0"
}
}
function empezar() {
if ( movimiento() ) {
mensaje++
if (ar.length <= mensaje)
mensaje = 0
borrarestado()
timerID = setTimeout(" empezar() ", pausa)
caminando = true
}
else {
var str = ""
for (var j = 0; j < estado.length; ++j) {
str += (estado.charAt(j) == "1") ? ar[mensaje].charAt(j) : " "
}
window.status = str
timerID = setTimeout(" empezar() ", velocidad)
caminando = true
}
}
function movimiento() {
var full = true
for (var j = 0; j < estado.length; ++j) {
if (estado.charAt(j) == 0)
full = false
}
if (full)
return true
while (1) {
var num = aleatorio(ar[mensaje].length)
if (estado.charAt(num) == "0")
break
}
estado = estado.substring(0, num) + "1" + estado.substring(num + 1, estado.length)
return false
}
function aleatorio(max) {
return Math.round((max - 1) * Math.random())
}
</script>
</body>
</html>
|
El último efecto hace que aparezca el mensaje de forma itermitente, acelerandose hasta quedarse estático:
<html>
<head>
<title>Efecto 4</title>
</head>
<body onLoad=" mensaje() ">
<script language="javascript">
var current = 2;
var flg = 0;
var ctr = 0;
var velocidad = 500 ;
var gen = 5;
var max = 12;
mensaje1=" www.pagina.de/fuikas ";
mensaje2=" ";
mensaje3=" regresa cuando puedas... ";
barra= mensaje1+mensaje2+mensaje3 ;
function mensaje() {
velocidad = velocidad - gen;
if (velocidad <= 0){
clearTimeout(tID);
} else {
if (flg == 0){
window.status =barra;
flg = 1;
} else {
window.status=" ";
flg = 0
}
tID=setTimeout(" mensaje() ",velocidad)
}
}
</script>
</html>
|
Si quieres añadir más mensajes a este script, solo tienes que agregarle esto debajo de los otros mensajes:
mensaje4="Lo que sea";
mensaje5="Lo que sea";
...
barra=mensaje1+mensaje2+mensaje3+mensaje4+mensaje5+...
Y así hasta que completes la pantalla.
Original de fuikas.tk
|
