La etiqueta frameset en HTML se emplea para dividir una página en marcos independientes, facilitando la navegación entre diferentes secciones sin recargar la página completa. Esta técnica es útil para crear interfaces con paneles laterales de menú y áreas de contenido principales.
A continuación, se muestra un ejemplo básico de implementación. El código principle define la estructura de marcos, donde el atributo cols especifica la distribución horizontal, y frameborder controla la visibilidad de los bordes. Los marcos individuales cargan documentos HTML spearados.
<!-- Archivo principal: index.html -->
<html>
<head>
<title>Estructura con frameset</title>
</head>
<frameset cols="15%,85%" frameborder="0">
<frame src="menu-lateral.html" noresize scrolling="auto">
<frame src="contenido-inicial.html" name="panel-principal">
</frameset>
</html>
El documento del menú lateral contiene enlaces que apuntan al marco principal utilizando el atributo target. Al hacer clic en un enlace, el contenido correspondiente se carga en el área designada.
<!-- Archivo del menú: menu-lateral.html -->
<html>
<head>
<title>Menú de navegación</title>
</head>
<body style="background-color: #f0f0f0; padding: 10px;">
<a href="seccion-a.html" target="panel-principal">Sección A</a><br>
<a href="seccion-b.html" target="panel-principal">Sección B</a><br>
<a href="seccion-c.html" target="panel-principal">Sección C</a><br>
</body>
</html>
Para el cambio de imágenes sin recargar la página, se puede usar JavaScript para actualizar dinámicamente el atributo src de una imagen principal al interactuar con miniaturas. Este método evita la necesidad de plugins adicionales.
<!-- Archivo para cambio de imágenes: galeria.html -->
<html>
<head>
<title>Galería interactiva</title>
<style>
.miniaturas { margin-top: 20px; }
.miniaturas a { margin-right: 10px; }
.miniaturas img { width: 80px; height: 60px; border: 1px solid #ccc; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const enlacesMiniaturas = document.querySelectorAll('.miniaturas a');
const imagenPrincipal = document.getElementById('imagen-destacada');
enlacesMiniaturas.forEach(function(enlace) {
enlace.addEventListener('click', function(evento) {
evento.preventDefault();
const nuevaRuta = this.getAttribute('data-ruta');
const nuevaDescripcion = this.getAttribute('data-descripcion');
imagenPrincipal.src = nuevaRuta;
imagenPrincipal.alt = nuevaDescripcion;
});
});
});
</script>
</head>
<body>
<h2>Visualizador de imágenes</h2>
<div>
<img id="imagen-destacada" src="imagenes/foto-inicial.jpg" alt="Vista principal" width="400" height="300">
</div>
<div class="miniaturas">
<a href="#" data-ruta="imagenes/foto1.jpg" data-descripcion="Paisaje montañoso">
<img src="imagenes/miniatura1.jpg" alt="Miniatura 1">
</a>
<a href="#" data-ruta="imagenes/foto2.jpg" data-descripcion="Vista costera">
<img src="imagenes/miniatura2.jpg" alt="Miniatura 2">
</a>
<a href="#" data-ruta="imagenes/foto3.jpg" data-descripcion="Ciudad nocturna">
<img src="imagenes/miniatura3.jpg" alt="Miniatura 3">
</a>
</div>
</body>
</html>