HTMLpointHTMLpoint HTMLpoint.com


 Marcos en línea y barra de desplazamiento 2/4

 por Massimiliano Valente

File principale scroller.htm


Este archivo contiene la mayor parte del código javascript necesario para el correcto funcionamiento de esta demo.

Las primeras líneas de código establecen los objetos a los que puede acceder este script. Por lo que se refiere a las ya conocidas diferencias de gestión del DOM de Netscape e Internet Explorer, este último accede a todos los elementos del documento, mientras que el primero accede tan sólo a los layer:

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0


La sección sucesiva de código, comprendida entre las marcas <HEAD>, gestiona las opciones de la ventana. Modificando los valores relativos, se opera directamente en las medidas de la misma: altura, anchura, distancia de los márgenes de la página, dimensiones de la barra de desplazamiento, etc.

Esta parte de código puede modificarse fácilmente sin necesidad de cambiar o reelaborar la estructura general del script. Por tanto, se interviene en estos valores para adaptar la ventana a las propias exigencias.

Veamos, con detalle, cada caso:

scrollLeft = 50

Distancia en píxel de la ventanaza al margen izquierdo del documento HTML. Dicho de otro modo: este valor regula la colocación de la ventana respecto al lado izquierdo.

scrollTop = 50

Distancia de la ventana al margen superior de la página

scrollWidth = 300
scrollHeight = 280


Respectivamente, anchura y altura en píxel de la ventana dentro del documento.

scrollBarWidth = 19

Anchura en píxel de la barra de desplazamiento lateral. Incrementando este valor el espesor de la barra lateral aumenta.

scrollBoxHeight = 23

Distancia del cursor al margen inferior respecto a los márgenes del scroller

scrollArrowHeight = 15 Distancia desde abajo en píxel de las flechas colocadas en los extremos de la barra de desplazamiento.

scrollMargenLeft = 10
scrollMargenRight = 10
scrollMargenTop = 10
scrollMargenBottom = 10


Respectivamente y para valores expresados en pixel: distancia del margen izquierdo al texto e imágenes que se encuentran dentro de la ventana (MargenLeft); distancia del margen derecho (MargenRight), del superior (MargenTop) y del inferior (MargenBottom).

scrollBorder = 2

Borde de la barra de desplazamiento en pixel. Si se quisiera omitir esta opción, bastaría impostar el valor en cero.

scrollBorderColor = "#F47A00"

Color del borde de la barra de desplazamiento expresado en valores hexadecimales.

scrollBarColor = "#FFD1BB"

Color de la franja interna de la barra de desplazamiento, es decir, del espacio por donde se desplaza el cursor.

scrollBoxColor = "none"

Color de fondo del cursor. En este caso el valor esta fijado en un valor de transparencia (none).

scrollArrowColor = "#F47A00"

Color de fondo de la flecha superior e inferior.

scrollFirstPage = "testo.html"

Documento HTML externo que se invoca dentro de la ventana. Es posible invocar también enlaces a recursos externos (p.ej. scrollFirstPage = http://www.htmlpoint.com)

El código sucesivo se refiere a la definición de funciones Javascript para el correcto funcionamiento de la demo: function enit, function mouseDown, function mouseMove, function mouseUp, function scrollMouseDown, function scrollMouseMove, function scrollArrowSlide, function loadSource, function scrollResize, function dynLayer, function dynLayerMoveBy, function dynLayerMoveTo, function dynLayerShow y function dynLayerHide.

Las funciones Javascript son recopilaciones de instrucciones invocadas mediante el nombre de la función y un elenco de argumentos. Generalmente, las funciones aparecen entre las marcas de un documento hipertextual para garantizar que se lean e interpreten antes de que el usuario pueda interactuar con ellas. Cuando el navegador lee el script, carga e interpreta las funciones en el orden en que éstas están presentes en el documento.

Dentro de la marca se inserta el gestor de eventos onLoad que invoca la función Init:

<BODY BGCOLOR="#FFFFFF" onLoad="enit()" background="fondo.jpg">

El siguiente código, comprendido entre las marcas <SCRIPT LANGUAGE="JavaScript">, invoca dentro del documento las funciones impostadas precedentemente relativas a la formatación de la ventana y del scroller. La marca
contiene los atributos que impostan el área en la que se visualiza la ventana, mientras que el atributo ID asigna los nombres de las funciones impostadas con anterioridad.

<DIV ID="scrollBoxDiv"><IMG SRC="scrollbox.gif" WIDTH=19 HEIGHT=23 ALT="Scroll Me" BORDER=0></DIV>

Cursor que discurre por la barra de desplazamiento.

<DIV ID="scrollArrowUpDiv"><IMG SRC="scrollarrowup.gif" WIDTH=19 HEIGHT=15 BORDER=0></DIV>

Flecha dirigida hacia arriba. Pulsándola desplazamos la ventana.

<DIV ID="scrollArrowDownDiv"><IMG SRC="scrollarrowdown.gif" WIDTH=19 HEIGHT=15 BORDER=0></DIV>

Flecha dirigida hacia abajo.

El análisis del script que cierra el documento sugiere una reflexión sobre el modo en que Netscape e Internet Explorer gestionan y soportan el HTML dinámico:


Muestra el ejemplo práctico


Netscape implementa los layer como tecnología de colocación dinámica propia e incompatible con los otros navegadores. La colocación de los layer se realiza mediante un sistema de coordenadas referidas al ángulo superior izquierdo de la página.

Internet Explorer, al contrario que Netscape, reconoce y adopta los marcos en línea (IFRAME) para gestionar la ventana, evitando así el uso de layer u hojas de estilo.


  Vuelve a principio de página