Albumes de imágenes (1)

Este es un álbum de imágenes muy simple y se basa en el Simple CSS photo-album de CSSPlay.

Consta de una sector superior donde se mostrarán las imágenes y un sector inferior donde aparece una fila con números que hacen las veces de vínculos. Haciendo click sobre ellos, se muestra una imagen determinada.

Todo el álbum es un DIV que contiene una lista desordenada (OL) de items (LI) y cuyas propiedades son establecidas por unas pocas instrucciones CSS configurables:

.galleryHcontenedor {
width: 480px; /* el ancho total */
height: 400px; /* el alto total */
margin: 0px auto;
background: #EEEEEE url(URL_imagen) no-repeat scroll 0px 0px; /* la imagen por defecto */
border: 1px solid #AAAAAA;
text-align: center;
}

.galleryH {
position: relative;
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior es igual al alto de la imagen */
padding: 0;
list-style-type: none;
}

.galleryH img {
border:none;
}

.galleryH li {
float:left;
}

/* estas son las propiedades gráficas de los números inferiores */
.galleryH li a, .gallery li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FFFFFF;
border: 1px solid #444444;
color: #000000 !important;
text-decoration: none !important;
}

.galleryH li a img {
position: absolute;
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se mostrará arriba */
border: none;
}

.galleryH li a:hover {
background-color: #DDDDDD; /* efecto rollover */
}

.galleryH li a:active img, .galleryH li a:focus img {
visibility: visible; /* mostrar la imagen al hacer click */
}

.galleryH li a:active, .galleryH li a:focus {
background-color: #C2C4D0;
}

Y el código HTML para utilizarlo es este:

<div class="galleryHcontenedor">
<ul class="galleryH">
 <li><a href="javascript:void(0);">01<img src="URL_imagen01"></a></li>
 <li><a href="javascript:void(0);">02<img src="URL_imagen02"></a></li>
 ..........
 <li><a href="javascript:void(0);">09<img src="URL_imagen09"></a></li>
 <li><a href="javascript:void(0);">10<img src="URL_imagen10"></a></li>
</ul>
</div>

• 01
• 02
• 03
• 04
• 05
• 06
• 07
• 08
• 09
• 10