Mensaje en la barra de estado

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>:

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>

Usuarios que han visto este tema también han visto...

- Secuencia de Imágenes
- Precarga simple para página web
- Gestión de eventos en JavaScript
- Funciones autoejecutables en Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento