Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje
HTML (las marquesinas), con un GIF animado, con Javascript, etc.
Marquesinas (Marquees)
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son
válidas para el Explorer de Microsoft (en el Netscape se verá como texto
fijo).
La etiqueta básica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
Que resulta como:
Como no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la
marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de
una línea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los distintos
atributos que modifican su apariencia y comportamiento:
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número
de pixels, o a un porcentaje de la pantalla. Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la
pantalla y tiene una altura de 60 pixels </MARQUEE>
Que resulta como:
ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser
TOP (arriba),
MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará
alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!
Que resulta como:
¡Hola!
BEHAVIOR
Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se
va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el texto
aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar
(como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un lado y se
desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza
alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin
desaparecer</MARQUEE>
Que se resulta así:
BGCOLOR
Con este atributo se modifica el color de fondo de la marquesina, de acuerdo con el método
visto en el Capítulo 7. Ejemplo:
<MARQUEE BGCOLOR="#FF7070">
Esta marquesina tiene un fondo de color rosa
</MARQUEE>
Que resulta así:
DIRECTION
Este atributo sirve para modificar la dirección hacia la que se dirige el texto. Por defecto es
LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo
a RIGHT. Ejemplo:
<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE>
Que resulta como:
SCROLLAMOUNT
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en
pixels. Cuanto mayor es el número, más rápido avanza. Ejemplo:
<MARQUEE SCROLLAMOUNT=50>
Doy saltos grandes </MARQUEE>
Que se ve como:
SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor
es el número más lento avanza. Ejemplo:
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
Que se ve como:
LOOP
Especifica el número de veces que aparecerá el texto. Es indefinido por defecto.
HSPACE, VSPACE
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está
fuera
de la marquesina.
Fuentes dentro de la
marquesina
Si se desea que el texto que aparece dentro de
una marquesina tenga una fuente concreta, distinta de la que tiene por
defecto el navegador, se debe poner la etiqueta <FONT
FACE> (ver Cap. 6) por fuera de la
etiqueta de la marquesina. Ejemplo:
<FONT FACE="IMPACT">
<MARQUEE BGCOLOR="FFFF00">Esto se ve con la fuente Impact</MARQUEE>
</FONT>
Que se verá así:
Recuérdese lo dicho en el capítulo 6: para que
esto surta efecto la fuente indicada debe estar instalada en el disco duro del
usuario. Véase también cómo se pueden indicar otras fuentes alternativas.
Como se ha dicho antes, esta etiqueta no es implementada por el
Netscape. El texto que está
dentro de la etiqueta de la marquesina se verá en este navegador como texto fijo normal.
Normalmente, si se hace uso de este recurso es porque se quiere
destacar de una manera muy
especial un texto, lográndose plenamente este objetivo en el Explorer, pero no así en el
Netscape, en donde dicho texto pasaría totalmente desapercibido. Una manera de paliar este
inconveniente, al menos en parte, es introducir la etiqueta de la marquesina dentro de una
tabla
(ver el Capítulo 10). De esta manera, el texto estará en cierta medida destacado en el Netscape,
y en el Explorer la marquesina se verá de una manera aún más estética. Ejemplo:
<TABLE BORDER=1>
<TR><TD>
<MARQUEE> Marquesina dentro de una tabla </MARQUEE>
</TD></TR>
</TABLE>
Que se verá como:
Texto en movimiento con un GIF animado
Otro procedimiento para conseguir texto en movimiento es el de confeccionar un
GIF animado
(ver el Capítulo 12).
Se puede conseguir que el texto se desplace realmente, emulando el comportamiento de las
marquesinas, pero no es fácil conseguirlo, y puede ser bastante laborioso.
Un procedimiento más sencillo es el siguiente: Creamos el texto apropiado con un programa
gráfico (tiene la ventaja sobre las marquesinas de que podemos escoger el tipo de fuente y los
efectos que deseemos), tal como el siguiente ejemplo (bienv1.gif):
Luego procedemos a borrar una a una cada palabra (o cada letra si se quisiera), y vamos
guardando cada imagen con un nombre distinto, tal como bienv2.gif:
A continuación borramos la palabra "del" y guardamos la imagen como bienv3.gif, y así con
el resto, hasta bienv7.gif en donde se habrían borrado todas las palabras.
Luego procedemos a montar la secuencia de las imágenes en algún programa para crear GIFs
animados, como por ejemplo en el GIF Construction Set o Animation
Shop. El orden será el inverso:
bienv7.gif - bienv6.gif - ... - bienv2.gif - bienv1.gif
Se le añade un LOOP (lazo, para repetir la secuencia) y se ajustan los tiempos de cada imagen.
Cuando esté todo a nuestro gusto, salvamos el GIF animado con el nombre de bienvend.gif.
Este es el resultado.
Otra variante puede ser, partiendo igualmente de la imagen inicial bienv1.gif, dejar sólo una
palabra en cada imagen, habiendo borrado el resto, y hacerlo con cada una de ellas. Con esto se
consigue una apariencia mayor de movimiento en el texto.
Texto en movimiento con Javascript
Otra manera de conseguir texto en movimiento es haciendo uso de
Javascript. Vamos a ver dos
ejemplos: un scroll (deslizamiento) de un texto en la barra de estado del navegador y un scroll
en una ventana dentro de la página.
Esto está implementado en los siguientes navegadores:
- Netscape, versión 2.0 o superior.
-
Explorer de Microsoft 3.0 o superior.
ejemplos que vamos a ver a continuación, únicamente se mostrará la manera de incluirlos en
nuestro documento HTML, pero sin pretender explicar su estructura.
Cómo incluir Javascript en un documento HTML
Recordemos que la estructura de un documento HTML es:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
El script (documento) en Javascript lo tenemos que
colocar dentro de la cabecera, después del
título. Es decir, entre las etiquetas </TITLE> y
</HEAD>, contenido dentro de la etiqueta:
<SCRIPT LANGUAGE="JavaScript"> </SCRIPT >
Es decir, que queda de esta manera: <HTML>
<HEAD>
<TITLE>
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
[Aquí debe ir colocado el script]
</SCRIPT >
</HEAD>
<BODY>
</BODY>
</HTML>
Además de esto, se debe añadir algo dentro de la etiqueta
<BODY>, como se indicará en cada
caso.
Scroll en la barra de estado
El script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">
<!--
/// Scroll en la barra de estado, (C) Pedro Maicas, 1996.
var txt="Esta es la primera linea de texto que se desplaza
"
+ " y esta es la segunda, puedes poner todas las"
+ " que quieras ! ";
function scroll()
{
window.status = txt;
txt = txt.substring(1, txt.length) + txt.charAt(0);
window.setTimeout("scroll()",150);
}
//-->
</SCRIPT>
Observación sobre el texto: Se puede poner el texto en una sola línea, tan larga como se
quiera, siempre que esté entre " y ";
Pero como no debe de haber ningún salto de línea, si el texto es demasiado largo, es mejor
dividirlo en distintas líneas, tal como está en el ejemplo.
Al final de la última palabra del texto conviene dejar una serie de espacios en blanco, para
que no esté encadenado el comienzo con el final.
Dentro de la etiqueta <BODY> se debe añadir el atributo:
onLoad="scroll();"
quedando así:
<BODY onLoad="scroll();">
Este es el resultado.
Scroll en una ventana
Ahora vamos a ver cómo conseguir que se desplace un texto dentro de una ventana de un
formulario. Con esto se consigue un efecto parecido al de las marquesinas (pero en este caso sí
es implementado por el Netscape 2.0 o superior).
El script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">
<!--
/// Scroll en en una ventana, (C) Pedro Maicas, 1996.
var txt="Esta es la primera linea de texto que se desplaza "
+ " y esta es la segunda, puedes poner todas las"
+ " que quieras ! ";
function scroll()
{
document.frm.w.value = txt;
txt = txt.substring(1, txt.length) + txt.charAt(0);
window.setTimeout("scroll()",150);
}
//-->
</SCRIPT>
Dentro de la etiqueta <BODY> se debe añadir el atributo:
onLoad="scroll();"
quedando así:
<BODY onLoad="scroll();">
Las etiquetas para la ventana del formulario son:
<FORM NAME='frm'>
<INPUT TYPE='text' NAME='w' SIZE=64>
</FORM>
Como la ventana está situada dentro de la página, debemos colocar estas etiquetas en el sitio
que nos convenga, dentro de la seción <BODY> </BODY>, mezclado con el resto del documento
HTML.
Este es el resultado.
CREDITOS A: http://ortihuela.galeon.com
Reproduce todo el post aqui abajo
0 comentarios:
Publicar un comentario
GRACIAS POR COMENTAR:
NO se aceptan palabras vulgares, el ADMINISTRADOR de BLACK-FX se reserva los derechos a eliminar todos los comentarios vulgares.
ATTE.: EL ADMINISTRADOR IVAN.
¿Como Dejar Comentarios Con Enlace Clickeable?
EMOTICONOS:
:) : ) ;( ; ( :( : ( :P : P :D : D :$ : $;) ; ) :-I : -I :-X : -X :o : o :O : O