Se puede conseguir texto en movimiento de diversas maneras: mediante el lenguaje HTML, mediante un fichero GIF animado o con JavaScript.
Marquesinas
Una marquesina es una ventana en la que se desplaza un texto. Las marquesinas sólo funcionan en Microsoft Internet Explorer; desde Netscape Navigator se verán como texto fijo. Para crear marquesinas se utiliza la etiqueta <MARQUEE> </MARQUEE> de este modo:
| <MARQUEE>Texto en movimiento</MARQUEE> |
Que ofrece el siguiente resultado:
|
|
Por defecto, las marquesinas ocupan todo el ancho de la pantalla, tienen la altura de una línea y el texto se desplaza lentamente hacia la izquierda. Los atributos WIDHT y HEIGHT ajustan la anchura y altura de la marquesina; pueden representar un número de puntos o un porcentaje de la pantalla.
El atributo ALIGN modifica la alíneación del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Por ejemplo:
| <MARQUEE WIDTH="30%" HEIGHT="40" ALIGN="BOTTOM">Esta marquesina ocupa el 30% de la anchura de la pantalla y tiene una altura de 40 puntos. El texto "Bonito ejemplo" estará alíneado con la parte inferior de la marquesina</MARQUEE> Bonito ejemplo |
mostraría lo siguiente:
|
El atributo BEHAVIOR define cómo se ha de desplazar el texto. Si tiene el valor SCROLL (asignado por defecto) el texto aparecerá por un lado, se desplazará hasta el otro hasta desaparecer y volverá a empezar. Si tiene el valor SLIDE, el texto aparecerá por un lado, se desplazará hasta el otro extremo y se parará ahí. Si tiene el valor ALTERNATE el texto se desplazará alternativamente hacia un lado y hacia otro.
El atributo BGCOLOR permite modificar el color de fondo de la marquesina. El sistema para asignar colores se explica en el apartado Color de fondo de la sección Imágenes. Por ejemplo:
| <MARQUEE BEHAVIOUR="ALTERNATE" BGCOLOR="00FF00">Este texto se mueve de un lado a otro y tiene un fondo de color verde.</MARQUEE> |
se vería de este modo:
|
|
El atributo DIRECTION modifica la dirección del texto. Por defecto es LEFT (izquierda), pero se puede conseguir que el texto se desplace hacia la derecha asignando el valor RIGHT.
El atributo SCROLLAMOUNT permite definir la cantidad de desplazamiento del texto en cada secuencia, expresado en puntos.
El atributo SCROLLDELAY especifica el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es el número, más lento se desplaza el texto. Por ejemplo:
| <MARQUEE DIRECTION="RIGHT" SCROLLAMOUNT="12" SCROLLDELAY="200">Este texto se mueve hacia la derecha dando saltos.</MARQUEE> |
aparecería así:
|
|
El atributo LOOP indica el número de veces que aparecerá el texto. Por defecto es indefinido.
Los atributos HSPACE y VSPACE definen el espacio de separación, en sentido horizontal y vertical, del texto que está fuera de la marquesina.
Texto en movimiento con JavaScript
Otra manera de crear texto en movimiento se consigue utilizando JavaScript, que permite desplazar texto tanto dentro de una página como en la barra de estado del navegador.
JavaScript es un lenguaje distinto del HTML (y más completo), por tanto, en los siguientes ejemplos únicamente se mostrará la manera de incluirlo en un documento HTML, sin necesidad de explicar su estructura.
Cómo incluir JavaScript en un documento HTML
Como se puede ver en el apartado Mi primer documento HTML, la estructura de un documento HTML es la siguiente:
|
<HTML> <HEAD> Cabecera <TITLE> Título </TITLE> </HEAD> <BODY> Cuerpo del documento </BODY> </HTML> |
El script en JavaScript ha de estar colocado dentro de la cabecera, después del título; o sea, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la etiqueta:
|
<SCRIPT LANGUAGE="JavaScript"> </SCRIPT> |
Texto en movimiento en la barra de estado
El script correspondiente es:
|
<SCRIPT LANGUAGE="JavaScript"> <!-- /// Texto en movimiento en la barra de estado var txt="Esta es la primera linea de texto que se desplaza " + "y esta es la segunda, aunque puedes poner " + "todas las que quieras. "; function scroll() { window.status = txt; txt = txt.substring(1,txt.length) + txt.charAt(0); window.setTimeout("scroll()",100); } --> </SCRIPT> |
El texto se puede poner en una única línea tan larga como se desee, siempre que esté entre comillas (""), pero como no tiene que haber ningún salto de línea, si el texto es muy largo conviene dividirlo en varias líneas, como muestra el ejemplo anterior. Al final de la última palabra del texto conviene dejar unos cuantos espacios en blanco, para que el final no esté encadenado con el inicio.
Dentro de la etiqueta <BODY> se debe añadir el atributo onLoad="scroll();" del siguiente modo:
| <BODY onLoad="scroll();"> |
Texto en movimiento en una ventana
Para conseguir que se desplace un texto dentro de una ventana de un formulario, consiguiendo un efecto similar al de las marquesinas, pero también visible desde Netscape Navigator, hay que utilizar el siguiente script:
|
<SCRIPT LANGUAGE="JavaScript"> <!-- /// Texto en movimiento en una ventana var txt="Esta es la primera linea de texto que se desplaza " + "y esta es la segunda, aunque puedes poner " + "todas las que quieras. "; function scroll() { document.frm.textomov.value = txt; txt = txt.substring(1,txt.length) + txt.charAt(0); window.setTimeout("scroll()",100); } --> </SCRIPT> |
Dentro de la etiqueta <BODY> se debe añadir el atributo onLoad="scroll();", como en el caso anterior.
Las etiquetas para la ventana del formulario son:
|
<FORM NAME="frm"> <CENTER> <INPUT TYPE="TEXT" NAME="textomov" SIZE="60"> </CENTER> </FORM> |
Dado que la ventana estará situada dentro de la página, habrá que colocar estas etiquetas en el sitio que convenga, siempre dentro del cuerpo del documento. El resultado es el siguiente:
|
