Cargar 2 (o más) marcos con un clic - Método HTML

Hay dos formas de hacer ésto... el método HTML y el método JavaScript. Cada uno tiene sus ventajas y sus inconvenientes.

El método HTML no requiere que javascript esté activado, y tampoco requiere que aprendas nada nuevo (si sabes hacer marcos, es todo lo que necesitas).

El método javascript es mejor si vas a intentar una manipulación más profunda de los marcos. A menudo es menos trabajoso, también es más o menos "rehusable", es más flexible y es más fácil de cambiar o de añadirle cosas. El único inconveniente real es que si alguien tiene su JavaScript desactivado, no va a llegar muy lejos.

Si te es posible, utiliza siempre el método HTML

Así que veremos éste en primer lugar.

Cargar 2 (o más) marcos - Método HTML

La idea es simple... los dos marcos que serán cambiados han sido definidos con un documento FRAMESET. Para cambiarlos, sólo tienes que cargar el nuevo documento FRAMESET.

Haz clic en el enlace inferior. Sígueme paso a paso. Te explicaré lo que está sucediendo.
Esto es un ejemplo.

El enlace en el que has pinchado carga primeramente una página con un directorio en el marco izquierdo y una página frameset (es decir, ya dividida) en el marco derecho. La página frameset carga inmediatamente 2 documentos en el marco derecho: El amigo de Joe, Bill; y el otro amigo de Joe, Ed.

Ahora, haz clic en el enlace de las amigas de Jackie.

Esto carga un nuevo documento frameset (split2_jackie.html) en el marco derecho, que a su vez carga inmediatamente a las amigas de Jackie, Amy y Joan.

Te darás cuenta de que lo único que haces es cargar un nuevo documento con las sentencias frameset adecuadas cuando pinchas en el enlace. Las sentencias frameset pueden ser tan complejas como desees. Prueba moviéndote adelante y atrás entre los amigos de Joe y las amigas de Jackie, para cogerle el truquillo.

Ahora pincha en Más amigos.

¡Vaya! ¿Qué demonios ha sucedido?

Bien... más de lo mismo. Pinchar en ese enlace carga una nueva página maestra con TARGET cargando como "_top". Es decir, carga una nueva página de directorio en el marco izquierdo y una nueva página frameset en el derecho, que a su vez se divide en 4 documentos, cada uno de los cuales irá en su respectivo marco a la derecha.

Haz clic en los amigos de John. Esto carga un nuevo documento frameset (split4_john.html) en el marco derecho, que a su vez carga a los amigos de John. Saltar adelante y atrás entre Joe, Jackie, John y Jenny simplemente carga diferentes framesets en el marco derecho. Si pinchas en el enlace Menos amigos recargas la primera página maestra.

Facilongo, ¿no?

Los documentos utilizados han sido:

Ver directorios
 
Páginas maestras
master_html_2.html
master_html_4.html
Páginas de Directorios
dir_html_2.html
dir_html_4.html
Páginas Frameset
split2_joe.html
split2_jackie.html
split4_joe.html
split4_jackie.html
split4_john.html
split4_jenny.html
Páginas de Amigos
zjoe_bill.html
zjoe_ed.html
zjoe_frank.html
zjoe_tom.html
zjackie_amy.html
zjackie_joan.html
zjackie_lisa.html
zjackie_toni.html
zjohn_al.html
zjohn_dean.html
zjohn_george.html
zjohn_ralph.html
zjenny_denise.html
zjenny_marci.html
zjenny_pam.html
zjenny_shannon.html

Y esto es todo en cuanto al método HTML. Recuerda, independientemente del método que utilices, hay un montón de posibilidades de meter la pata. Procura ser muy meticuloso, y comprueba la fiabilidad completa del sistema (incluyendo todos y cada uno de los enlaces) antes de subirlo a tu servidor.


¿Quieres examinarte? Prueba con lo siguiente...

practica

Intenta hacer lo que sigue empezando desde cero. El diseño básico es éste:

   Mamíferos
         Animales de granja
               Vaca | Cerdo | Caballo
         Animales salvajes
               Oso | Lobo
         Malditos roedores
               Ratón | Ardilla
   Plantas
         Árboles
               Roble | Tilo | Sauce | Olmo
         Flores
               Clavel | Tulipán | Rosa
         Frutas
               Manzana | Naranja | Uvas | Peras | Ciruelas | Limones
         Vegetales
               Calabaza | Habas
   Peces
         Marinos
               Salmón | Pez espada | Tiburón | Pez gato
         De acuario
               Goldfish | Guppies

La solución está aquí por si la necesitas.

Y ahora vamos a por el método JavaScript ...