} JAVASCRIPT: Dos marcos con un único clic 1/2
HTMLpointHTMLpoint HTMLpoint.com


 Dos marcos con un único clic 1/2



Los marcos los ha introducido Netscape 2 y posteriormente se han estandarizado en las especificaciones de HTML 3.2. En la actual Web publishing representan un difundidísimo instrumento de creación y gestión de layout de página, tanto como para ser usados masivamente en sitios profesionales y aficionados. La presencia de marcos permite gestionar partes del documento autónomamente respecto al resto. Gracias a estos instrumentos, es posible mantener fija una parte de documento, evitándole al navegador que cargue en cada nuevo refresh toda la página. Normalmente, la parte fija del documento contiene un menú de navegación siempre visible, que le permite al usuario saltar de una sección a otra. En otros sitios el marco fijo está destinado a hospedar un banner publicitario que se modifica con refresh automáticos. Con esta última estrategia los creadores intentan aligerar las páginas del banner y al mismo tiempo mantenerlo siempre visible, incluso en caso de scroller de página.

Los marcos, si se usan con precaución, hacen más ordenado el sitio y, consecuentemente, más intuitiva la nacegación. Al contrario, si se usan equivocadamente, tienen el efecto opuesto de crear una suerte de caja china, dentro de la cual el visitante se encuentra perdido. Sobre este último punto se concentran las críticas de los detractores de los marcos, tan aguerridos como para crear asociaciones "no-frame".

Un aspecto técnico relativo a los marcos al que HTML no da soluciones es la carga de diferentes marcos con un único clic. En otras palabras, si en una página dividida en dos marcos, uno superior y otro inferior, se intenta cargar un documento en el segundo clicando sobre el un enlace presente en el primero, no se encuentran demasiadas dificultades. Pero si los marcos fuesen tres y con un clic en el superior se quisieran modificar al mismo tiempo los otros dos, el problema, si se afronta con instrumentos típicos de HTML, no tendría solución. Javascript pone remedio a este problema con un sencillo script que modifica los marcos con un único clic.

Para un ejemplo práctico, considérese una página dividida en tres marcos, uno vertical izquierdo y dos horizontales con los siguientes nombres:

arriba.htm
izquierda.htm
central.htm

El documento que gestiona los tres marcos y determina dimensiones y características es:

ejemplo01.html

Éste es un archivo normal HTML, que no necesita ningún cambio o añadido de sintaxis Javascript. El código interno se puede reconducir fácilmente a difundidos tag y órdenes HTML:

Del contenido de este archivo se deduce la estructura del documento, que prevé el uso de los tres archivos ya citados. Los nombres asignados a tales archivos no son importantes para el correcto funcionamiento del script, mientras que lo es para los parámetros "name":

name="izquierda"
name="arriba"
name="central"

Simplificando, estos nombres son etiquetas asignadas a los marcos, gracias a las cuáles será posible indicar con órdenes específicas si se deben modificar y cómo.

Para comprender perfectamente este Javascript, se hará referencia al ejemplo práctico presente en el Cd-rom adjunto a la revista, tanto para el nombre de los archivos como para las diferencias cromáticas que los caracterizan.

El archivo "izquierda.htm" es el único que se tiene que modificar y al que se añade sintaxis Javascript. Se trata del marco amarillo de la izquierda, en el que se colocan los enlaces que cambiarán simultáneamente los dos marcos de la derecha ("arriba" y "central").

Antes que nada, se escribe la sintaxis Javascript en los tag <HEAD>:
Muestra el ejemplo práctico

La primera función establece que clicando en el enlace se carguen los marcos de este modo:

parent.arriba.location.href="central.htm"

Es decir: el archivo de nombre "central.htm" se carga en el marco llamado "alto" e

parent.central.location.href="arriba.htm"

el archivo "arriba.htm" se carga a su vez en el marco llamado "central"

De esta manera se asiste a un vuelco de las posiciones. El marco de color negro que antes estaba arriba, ahora está abajo, y viceversa para el marco de color blanco.


  Vuelve a principio de página
1997-2000 - Gráfica, layout y guías son propiedad exclusiva de HTMLpoint s.r.l.