Make your own free website on Tripod.com

Trucos con la barra de estado

La barra de estado

Si te has fijado tanto en mi página web, como en este tutorial, habrás notado que controlo por completo la barra de estado del navegador. Quizá también hayas visto (por ejemplo, en la página de Nino) esos scrolls tan bonitos, y que tan rápido cansan. Ahora voy a explicar cómo se hacen ambas cosas.

Para empezar vamos con lo más sencillito, escribir mensajes diversos en la barra de estado. En el capítulo en que hablábamos sobre los objetos predefinidos aparecía el objeto window. En este objeto se definín dos propiedades: status y defaultStatus. Para poner un mensaje en la barra de estado nada más cargar el documento y que se mantenga ahí mientras no haya otro más importante (un sustituto del famoso Document: Done del Netscape, vamos) haremos:

<BODY onLoad="window.defaultStatus='El documento ya se ha leído';return true">

El código lo único que hace es modificar defaultStatus y devolver true como resultado del controlador de eventos. Por alguna misteriosa razón es obligatorio hacer esto cuando modificas algo de la barra de estado. No me preguntéis por qué, al parecer no es más que una convención.

Ahora veremos cómo se puede definir el valor de la barra de estado cuando el ratón pasa por encima de un elemento <A>:

<A HREF="MiPagina.html" onMouseOver="window.status='Vente a mi pásgina';return true">

¿Fácil, no? Bueno, más tarde veremos cóno hacer scrolls, ahora pasamos a abrir nuevos horizontes.

Crear nuevas ventanas

<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Se usan los comentarios para esconder el código a navegadores sin JavaScript
    function AbrirVentana() {
      MiVentana=open("","Mi ventana","toolbar=no,directories=no,menubar=no");
      MiVentana.document.write("<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
      MiVentana.document.write("<CENTER><H1><B>Esto puede ser lo que tu quieras</B></H1></CENTER>");
    }
  </SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Sésamo" onClick="AbrirVentana()">
</FORM>

Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la función AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta función crea la nueva ventana MiVentana y escribe en ella por medio del objeto document todo el código HTML de la página. Aquí debajo podéis probarlo.

Scrolls en la barra de estado

<HTML>
<HEAD>
  <TITLE>Ejemplo</TITLE> 
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Se usan los comentarios para esconder el código a navegadores sin JavaScript
    var texto="Aquí está el mensaje que espero observes y "+
    "leas con suma atención";
    var longitud=texto.length;
    var anchura=140;
    var pos=1-anchura;
    function scroll() {
      pos++;
      var scroller="";
      if (pos==longitud) {
        pos=1-anchura;
      }
      if (pos<0) {
        for (var i=1; i<=Math.abs(pos); i++) {
          scroller=scroller+" ";
        }
        scroller=scroller+texto.substring(0,anchura-i+1);
      }
      else {
        scroller=scroller+texto.substring(pos,anchura+pos);
      }
      window.status = scroller;
      setTimeout("scroll()",150);
      }
  //-->
  </SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor pásgina del mundo conocido.
</BODY>
</HTML>

Como podéis ver, la cosa es más larga que todos los ejemplos anteriores, aunque no mucho más compleja. Simplemente escribe espacios para rellenar cuando el mensaje está a la derecha y vuelve a empezar cuando éste a desaparecido por la izquierda. La única pega que tiene es cómo demonios hago para que la funció se llame cada cierto tiempo predeterminado para ir desplazando el texto a una velocidad constante.

La respuesta esta en el método setTimeout("función",tiempo) que llama a función cuando hallan pasado tiempo milisegundos.

Volver a la página anterior

Si quieres volver a la u´ltima página donde has estado, o a cinco más atrás, lo puedes hacer con los métodos proporcionados por document.history que ya vimos. Para emplearlos no tiene más que hacer lo siguiente:

<A HREF="javascript:window.history.back()">

El ejemplo está en el índice que tienes a tu izquierda: búscalo, que no es muy dificil.