Un ejemplo de ello, lo hemos dado con el menú desplegable
realizado completamente con CSS y HTML, sin necesidad de aplicar
otros lenguajes o animaciones de ningún tipo.
Este mismo tipo de recursos nos permite mostrar algunos
contenidos de forma tal que simulan ser dinámicos.
El ejemplo que hoy traemos, se trata de una galería de imágenes muy sencilla,
con muy poco código, como veremos más adelante,
y que está basada
en los mismos principios con que fue desarrollado el mencionado
menú desplegable. Es más, este ejemplo es aún más sencillo.
Pero no por sencillo deja de ser atractivo.
Lo que necesitaremos
Para poder realizar el ejercicio, necesitarán
Luego de descargado el archivo y descomprimido, encontrarán
un archivo HTML y un archivo CSS, que tienen el ejemplo ya terminado.
Junto a ellos, se encuentra una carpeta “img” que contiene
todas las imágenes necesarias. Dentro de esta carpeta se
encuentran dos carpetas más, llamadas “chicas” y “grandes”
que son las que tienen las imágenes que utilizaremos
en la galería de imágenes propiamente dicha.
El ejemplo ya terminado pueden verlo aquí.
Conceptos generales
Podríamos decir que este trabajo está basado fundamentalmente
en un solo concepto, y es el de la visibilidad de las capas.
Con CSS podemos determinar si una capa es visible
o no mediante el empleo de la etiqueta “visibility”,
que puede tener los valores visible, hidden y collapse.
La galería de imágenes constará de una serie de imágenes en miniatura (thumbnails)
alineadas en forma ordenada en dos columnas.
Cuando se pasa el puntero por estas imágenes,
aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen ampliada.
Para realizar esto, debemos emplear una etiqueta
y uno de sus posibles valores, que para este
Ahora explicaremos los principios de funcionamiento.
Cada par de imágenes (una imagen ampliada con su respectivo thumbnail)
se encuentran formando parte del mismo ítem de lista.
Cada una de estas imágenes que forman el par, tienen
una clase diferente (min y max). La clase min define los atributos del thumbnail.
La clase “max” es la que se refiere a la imagen ampliada,
de su atributo “visibility”, lo que hace que en condiciones
normales esta imagen no se encuentre visible.
Se emplea una pseudo-clase vinculada a la clase “max” (“a:hover .max”),
que es la que hace que el atributo “visibility” adquiera valor “visible”
cuando el puntero se posa sobre cualquier elemento que compone el ítem de la lista.
Desarrollo del ejemplo
Como pueden apreciar, para que el tema quede más claro se
han definido todos los atributos CSS que están relacionados
con la galería en si misma, en un archivo CSS diferente (“galería.css”)
del que contiene los atributos de los restantes componentes
de la página, de forma que el tema pueda verse con mayor claridad.
Estructura
En primer lugar, definiremos la estructura del menú, que consta
simplemente de dos listas no ordenadas (ul),
conteniendo cada
una de ellas cuatro ítems (li). Las listas tienen
sus atributos definidos
por la clase “cat”. Como ya dijimos, cada uno de los ítems contiene dos imágenes.
Ubicación de los thumbnails
En primer lugar, debemos ubicar las imágenes en miniatura
en dos columnas (cada columna es una lista diferente)
y para ello debemos definir en el archivo CSS los atributos
de la clase “min” que se encuentran contenidos en los ítems (li).
|
1
2
3
4
5
6
7
8
9
10
11
|
.cat { list-style-type: none; margin: 0 0 25px 10px; padding: 0px; float:left;
}
li .min { width: 75px; height: 64px; padding: 6px 20px 20px 7px;
}
|
La primera clase define que la lista no tendrá estilo de lista,
se definen los márgenes y el relleno para
que se vea como queremos,
y le damos el valor “left” a la propiedad “float”,
de forma que ambas
listas se ubiquen una al lado de la otra flotando a la izquierda.
Luego, se definen los atributos de las dimensiones de cada uno
de los ítems y el relleno de los mismos, en la regla “li .min”.
Imágenes grandes
Cuando vemos el ejemplo que hemos desarrollado hasta aquí,
vemos que se nos presenta un gran espacio en blanco que
solo aparecerá cubierto por las imágenes grandes cuando
el puntero se pose sobre los thumbnails. Es por esta razón,
que incorporamos una imagen que contendrá un mensaje
con instrucciones para el usuario, de forma tal
que todo el espacio quedará cubierto.
Esto lo realizamos empleando una capa con posicionamiento absoluto,
y cuyos atributos aparecen definidos en el archivo CSS con el identificador “#base”:
|
1
2
3
4
5
6
7
8
9
|
#base { width: 410px; height: 310px; border: solid 1px #ccc; position: absolute; top: 250px; left: 500px; background: url(img/galeria.png);
}
|
Como vemos, tiene un ancho y una altura definidos. Como hemos
querido agregar un borde que aparecerá separado 5px a cada lado
de la imagen, las dimensiones son 10px más grandes que
las de las imágenes. A su vez, esta capa tiene una imagen de relleno,
que es la que se presenta cuando ninguna de las imágenes de la galería está visible.
Ahora solo resta definir el posicionamiento de las imágenes grandes,
así como su condición de visibilidad, por lo que definiremos
a todos los elementos contenidos dentro de un ítem de lista con la clase “.max”.
|
1
2
3
4
5
6
|
li .max{ visibility: hidden; position: absolute; top: 256px; left: 506px;
}
|
Como vemos, se define que en condiciones normales estos
elementos (imágenes) estarán no visibles.
La posición (top y left)
son seis pixeles más que los de la capa “#base”, debido al relleno
de 5px por lado que hemos definido y al borde de 1px que tiene dicha capa.
A continuación, mediante el empleo de una pseudo-clase, haremos
que la capa sea visible cuando el puntero se pose sobre
cualquier elemento con enlace contenido dentro del ítem de lista:
|
1
2
3
|
a:hover .max { visibility: visible;
}
|
El ejemplo ya terminado pueden verlo aquí.
Conclusión
Como pueden ver, el ejemplo es extremadamente sencillo.
Se puede ampliar, colocar una mayor cantidad de columnas,
modificar las posiciones o cualquier otra cosa que
su imaginación les dicte, sin mayores dificultades.
Tema anterior
Primer 