HTMLpointHTMLpoint HTMLpoint.com


 Scroller horizontal 1/2

  semana 37 - 18 octubre 1999

El efecto marquee en el texto es generado por una marca propiedad de MsIe, no reconocida por Netscape. Es posible obtener un efecto muy similar explotando las potencialidades del HTML dinámico y evitando molestas incompatibilidades. Y no sólo: es posible mover dinámicamente las imágenes en sentido vertical y horizontal.
Con esta breve premisa podemos deducir que el ejemplo Javascript de este semana en realidad toma prestadas algunas peculiaridades de HTML dinámico. En particular, el ejemplo crea un efecto movimiento de tres imágenes, a las cuales es posible asociar un enlace y todas las demás propiedades de la marca IMG (border, weight, heigth, vspace, hspace, alt, etc.).

El ejemplo consta de 4 file: Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

esempio.htm

Para que los efectos del script se produzcan, debemos intervenir únicamente en el dile esempio.htm. Antes de pasar a analizar el código, es necesario crear las tres páginas que se moverán en sentido horizontal.
Las imágenes del ejemplo tienen formato .gif y un tamaño de 150x110 píxel. El formato gráfico adoptado es indiferente. Nosotros hemos elegido .gif porque a una calidad igual corresponde un menor peso en Kb. Queremos asociar cada imagen con un enlace a un sitio web.

El código Javacript se inserta en el cuerpo del documento, es decir, entre las marcas <BODY>:

Las primeras líneas de código:

y la línea de código:

establecen:

var sliderwidth=300: anchura (width) en píxel de la ventana en la que pasan las imágenes.

var sliderheight=150: altura (height) en píxel de la ventana en la que pasan le imágenes, pero sólo para Netscape visto que Msie la adapta automáticamente.

var slidespeed=5: velocidad de desplazamiento de las imágenes. Cuanto más alto es el valor, mayor es la velocidad.

Las imágenes creadas (en nuestro ejemplo: 01.gif, 02.gif y 03.gif) junto con sus propiedades son invocadas por el código:

  Vuelve a principio de página