Albumes de imágenes (3)

El tercer ejemplo de álbum se llama Avatar Parade y pertenece a CSS Play. Es un método para mostrar imágenes usando la pseudo-clase :hover que, en Internet Explorer sólo es accesible cuando la asociamos a vínculos.

En este caso, cada rectángulo numerado es un enlace y al colocar el puntero del ratón sobre ellos, la imagen central, que es la única, cambia.

El código CSS es el siguiente:

#galleryC {
  position: relative;
  width: 360px; /* ancho total */
  height: 270px; /* alto total */
  margin:0;
}

/* las propiedades de cada rectángulo */
#galleryC a.p1, #galleryC a.p2, #galleryC a.p3, #galleryC a.p4,
#galleryC a.p5, #galleryC a.p6, #galleryC a.p7, #galleryC a.p8 {
  position: absolute;
  display: block;
  width: 120px; /* ancho de cada rectángulo */
  height: 90px; /* alto de cada rectángulo */
  background-color: #DDDDDD;
  color: #000000 !important;
  text-decoration: none;
  font-size: 64px !important;
  font-family: Georgia !important;
  text-align: center;
}

/* la posición de cada rectángulo */
#galleryC a.p1 {left: 0px; top: 0px;}
#galleryC a.p2 {left: 120px; top: 0px;}
#galleryC a.p3 {left: 240px; top: 0px;}
#galleryC a.p4 {left: 0px; top: 90px;}
#galleryC a.p5 {left: 240px; top: 90px;}
#galleryC a.p6 {left: 0px; top: 180px;}
#galleryC a.p7 {left: 120px; top: 180px;}
#galleryC a.p8 {left: 240px; top: 180px;}

/* efecto rollover */
#galleryC a.p1:hover, #galleryC a.p2:hover,
#galleryC a.p3:hover, #galleryC a.p4:hover,
#galleryC a.p5:hover, #galleryC a.p6:hover,
#galleryC a.p7:hover, #galleryC a.p8:hover {
  background-color: #EEEEEE;
  color:#000000 !important;
  text-decoration:none;
}

/* la imagen central */
#galleryC a img {
  position: absolute;
  visibility: hidden;
  left: 0px;
  top: 0px;
}

/* mostrar la imagen central */
#galleryC a.p1:hover img, #galleryC a.p2:hover img,
#galleryC a.p3:hover img, #galleryC a.p4:hover img,
#galleryC a.p5:hover img, #galleryC a.p6:hover img,
#galleryC a.p7:hover img, #galleryC a.p8:hover img {
  position: absolute;
  visibility: visible;
}

/* mostrar la imagen central */
#galleryC a.p1:hover img {left: 120px; top: 90px;}
#galleryC a.p2:hover img {left: 0px; top: 90px;}
#galleryC a.p3:hover img {left: -120px; top: 90px;}
#galleryC a.p4:hover img {left: 120px; top: 0px;}
#galleryC a.p5:hover img {left: -120px; top: 0px;}
#galleryC a.p6:hover img {left: 120px; top: -90px;}
#galleryC a.p7:hover img {left: 0px; top: -90px;}
#galleryC a.p8:hover img {left: -120px; top: -90px;}

Y este es el código HTML:

<div id="galleryC">
  <img src="URL_imagen1"
     style="position: absolute; left: 120px; top: 90px;" />
  <a href="javascript:void(0);" class="p1"> 1<img src="URL_imagen1"/></a>
  <a href="javascript:void(0);" class="p2"> 2<img src="URL_imagen2"/></a>
  <a href="javascript:void(0);" class="p3"> 3<img src="URL_imagen3"/></a>
  <a href="javascript:void(0);" class="p4"> 4<img src="URL_imagen4"/></a>
  <a href="javascript:void(0);" class="p5"> 5<img src="URL_imagen5"/></a>
  <a href="javascript:void(0);" class="p6"> 6<img src="URL_imagen6"/></a>
  <a href="javascript:void(0);" class="p7"> 7<img src="URL_imagen7"/></a>
  <a href="javascript:void(0);" class="p8"> 8<img src="URL_imagen8"/></a>
</div>

1 2 3 4 5 6 7 8

VER:

Albumes de imágenes (1)

Albumes de imágenes (2)