<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function AbrirVentana() { MiVentana=open("","MiPropiaVentana","toolbar=no,directories=no,menubar=no,status=yes"); 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.
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ían dos atributos: 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, ahora vamos a ver cómo se hacen scrolls, que es mas chulo todavía.
<HTML> <HEAD> <TITLE>Ejemplo</TITLE> <SCRIPT LANGUAGE="JavaScript"> var texto=" Aquí está el mensaje que espero observes y leas con suma atención "; var longitud=texto.length; function scroll() { texto=texto.substring(1,longitud-1)+texto.charAt(0); window.status = texto; 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 no es ni más larga ni más compleja que los ejemplos anteriores. Simplemente escribe el texto en la barra de estado y luego coge el caracter más a la izquierda del mismo y lo pone a la derecha, para después volver a escribirlo. La única pega que tiene es cómo demonios hago para que la función 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.
<A HREF="javascript:window.history.back()">Y, para variar, si deseas probar no tienes más que pulsar aquí.
<HTML> <HEAD> <TITLE>Ejemplo de imagenes</TITLE> <SCRIPT LANGUAGE="JavaScript"> if (document.images) { var activado=new Image(); activado.src="encendido.gif"; var desactivado= new Image(); desactivado.src="apagado.gif"; } function activar(nombreImagen) { if (document.images) { document[nombreImagen].src=activado.src; } } function desactivar(nombreImagen) { if (document.images) { document[nombreImagen].src=desactivado.src; } } </SCRIPT> </HEAD> <BODY> <A HREF="mipagina.html" onMouseOver="activar('prueba');" onMouseOut="desactivar('prueba');"> <IMG NAME="prueba" SRC="apagado.gif" BORDER=0> </A> </BODY> </HTML>Lo primero que hay que indicar es que para que funcione el invento la imagen debe ser un enlace. ¿Por qué? Porque los eventos que controlan si el ratón pasa o no por encima no son admitidos por la etiqueta <IMG>. También deberemos "bautizar" nuestra imagen usando el atributo NAME="como-se-llame" para permitir al código su identificación posterior.
El ejemplo funciona de la siguiente manera: en principio la imagen que vemos es la desactivada, que es la que indica la etiqueta <IMG>. Al pasar el raton por encima de ella el evento onMouseOver llamará a la función activar llevando como parámetro el nombre de la imagen. Esta función sustituirá en el objeto document el nombre del fichero donde se guarda la imagen por encendido.gif, que es el gráfico activado. Cuando apartemos el ratón de la imagen, será el evento onMouseOut el que se active, llamando a desactivar. Esta función sustituirá el gráfico de nuevo, esta vez por apagado.gif.
Leyendo esta explicación parece que una parte del código sobra. ¿Para qué sirve declarar dos objetos Image para albergar los gráficos? ¿No bastaría con cambiar directamente el nombre de la imagen escribiendo document[nombreImagen].src = 'encendido.gif';? Pues no del todo. Efectivamente funcionaría, pero cada vez que cambiásemos el nombre el navegador se traería la imagen del remoto lugar donde se encontrara. Es decir, cada vez que pasásemos el ratón por encima de la imagen o nos alejaramos de ella tendríamos que cargar (aunque ya lo hubiésemos hecho antes) el gráfico correspondiente. Es cierto que con la caché del navegador este efecto quedaría algo mitigado, pero siempre es mejor precargar las imágenes usando el objeto Image, ya que así el navegador comenzará a leer el gráfico en cuanto ejecute el código en vez de esperar a que el usuario pase por encima de la imagen con el ratón. El objeto Image tiene como atributos los distintos parámetros que puede tener la etiqueta <IMG>.
Por último, hay que estudiar que significa eso de if (document.images). En los navegadores que no poseen JavaScript 1.1 (léase Netscape 2 y Explorer 3 e inferiores) el objeto Image no existe y dará un mensaje si se lo encuentra por ahí. La solución a este problema consiste en detectar la capacidad del navegador para manipular gráficos preguntandole por la existencia del array document.images. Así podremos no crear las variables que guardan los gráficos ni ejecutar el código de las funciones para activar y desactivar en el caso de que el navegador no soporte este array, lo cual es lo mismo que decir que soporta la versión 1.1 de JavaScript.
Y este es nuestro ejemplo funcionando:
Para hacerlo con más de una imagen el asunto se complica. Si quereis saber la manera de realizarlo examinad el código del frame índice que tenéis a la izquierda o visitad el taller web.