HTMLpointHTMLpoint HTMLpoint.com


 Scroller de texto e imágenes 3/3  

 por Massimiliano Valente

Un efecto similar al último ejemplo de scroller vertical puede implementarse con un ulterior efecto gráfico que haga aún más fuerte el impacto visual.

Se trata de un efecto "fade", es decir de difuminación del texto, que desaparece progresivamente hasta llegar a confundirse con el color de fondo. El file "esempio04.htm" insertado en el cd-rom adjunto tiene un código más complejo de los vistos precedentemente pero sólo hay que modificar una pequeña parte del mismo:

var bgcolor="#FFFFFF";

Define el color que sirve de fondo al texto visualizado.

var color="#0000FF";

Establece el color del texto en movimiento de abajo hacia arriba.

Los mensajes que se visualizarán se numeran progresivamente y se insertan de la siguiente forma:

Muestra el ejemplo práctico


En este caso debemos también evitar introducir comillas simples si queremos que la demo produzca sus efectos.

Para añadir otros mensajes a los presentes, es suficiente insertar otras líneas de código con numeración progresiva:

message[5]='nuevo mensaje'
message[6]='nuevo mensaje'
message[7]='nuevo mensaje'


La formatación del texto es diferente para Netscape y MsIe debido a las consabidas divergencias relativas al acceso DOM (Document Object Model) de Dynamic HTML.

Para Netscape es necesario impostar el siguiente código:

document.layers['textanim'].document.writeln('<P Class="maen" Align="Center"><font color="'+rgb+'" size=4 face=arial>'+message[msg]+'</font>')

Por su parte, para MsIe la línea de código es:

textanim.innerHTML='<P Class="maen" Align="Center"><font color="'+rgb+'" size=4 face=arial>'+message[msg]+'</font>'

En ambos casos la formatación hace referencia a la hoja de estilo:

La propiedad "innerHTML" define los contenidos de un elemento usando marcas. Esta propiedad, como innerText, outerHTML y outerTEXT, forma parte del mecanismo de HTML dinámico denominado "sustitución HTML". Dicho de otro modo, este enfoque se dirige a elementos HTML ya existentes, los cuales son considerados objetos que se pueden cambiar dinámicamente con script asociados a la página.

window.setTimeout('start()',1000);

Define el tiempo, expresado en milésimas de segundo, que separa una línea de mensaje de la sucesiva.

window.setTimeout('start()',2000);

Establece el tiempo, en milésimas de segundo, que separa las sucesivas visualizaciones del mensaje completo. A diferencia del anterior, que separaba cada una de las líneas del mensaje, este valor se refiere a todo el contenido del mismo.

Una vez impostado el código dentro de la marca , es necesario operar en el cuerpo del documento, insertando para MsIe y para Netscape por separado el código que invoca todo cuanto hemos impostado :

<Div id="textanim" style="position: absolute; left: 150; top: 200">
</Div>


Este código es reconocido por el navegador de Redmond y establece la posición absoluta del efecto dentro de la página.

<Layer name="textanim" left=150 top=200>
</Layer>


Este código invoca, por su parte, todo lo necesario para el funcionamiento de la demo con Netscape.

Para que el script funcione correctamente, debemos introducir en la marca el gestor de eventos "onLoad" que invoca la función "start()":

<BODY vlink="blue" onLoad="start()">

También en este caso es posible sustituir el texto con imágenes en formato GIF o JPG actuando en el código que imposta los mensajes:

Muestra el ejemplo práctico



  Vuelve a principio de página