Usamos :hover, position y z-index para hacer una galería fotográfica con scroll vertical

En esta ocasión vamos a comentar una demo de galería fotográfica que figura en la página de cssplay.

En ella observamos la foto seleccionada al pinchar, coger el foco o situarnos con el ratón sobre la imagen pequeña en la caja con scroll de la derecha.

Para ello vamos a construir un primer ejercicio simple que solo contenga 3 capas: la capa de “contenidos” dentro de la cual está otra capa “pequeña” que, a su vez, contiene la capa más interior llamada “grande”.

<div id="contenidos">
     <div id="pequeño">
       <div id="grande">
          <img alt="" src="Imagenes/pic2.jpg" />      
       </div> <!-- fin grande -->
     </div> <!-- fin pequeño -->
   </div> <!-- fin contenidos -->

Comenzamos añadiendo estilo para la capa de contenidos:

#contenidos {
 background-color: transparent;
 background-image: url('Imagenes/pic0.jpg');
 background-repeat: no-repeat;
 background-position: 90px 0px;
 width: 750px;
 height: 400px;
}

Con estas características confeccionamos las dimensiones de la página y situamos en la izquierda la imagen de presentación.

Continuamos con el estilo de la capa pequeña

#pequeño {
 width: 75px;
 height: 50px;
 float: right;
 background-image: url('Imagenes/pic2t.jpg');
 background-repeat: no-repeat;
 background-position: center center;
}

Ahora cargamos la imagen pequeña (pict2t.jpg) y la situamos a la derecha. Esta capa arrastra la capa grande que está contenida en la pequeña.

Usando el posicionamiento absoluto sacamos la imagen grande del campo de visión:

#grande {
 position: absolute;
 left: -9999px;
 top: 0px;
}

Finalmente ponemos estilo para dar lugar al efecto de rollback clave de la página

#pequeño:hover #grande {
 width: 500px;
 height: 350px;
 left: 90px;
 background-color: #FFFFFF;
}

Esta instrucción debe leerse como sigue:
Cuando #pequeño está en :hover ¿Qué pasa con la capa interior #grande?
Lo que pasa es que la situamos sobre la imagen de presentación.
Para poder usar la sintaxis anterior es obvio, ahora, que la capa grande tiene que ser interior a la capa pequeña, ya que de otro modo no puede construirse la orden.

---

Observemos ahora el código fundamental correspondiente al ejemplo completo:

<div id="holder">
 <ul id="scrollbox">
         <li><a class="slidea" href="#nogo">
           <span><img src="Imagenes/pic1.jpg"
           alt="" /><br />Los Pechos</span>
         </a></li>
  <li><a class="slideb" href="#nogo">
           <span><img src="Imagenes/pic2.jpg"
           alt="" /><br />El Teide desde Tejeda
           </span>
         </a></li>
         ...
         ...
 </ul>
</div>

Y los elementos fundamentales del estilo

#scrollbox a:active span {width:480px; 
         height:400px; top:0;  left:90px; color:#000; 
         background:#fff; z-index:1;}
      #scrollbox a:focus span {width:480px; 
         height:400px; top:0;left:90px; color:#000; 
         background:#fff; z-index:10; outline:0;}
      #scrollbox a:hover span {width:480px; 
         height:400px; left:90px; background:#fff; 
         z-index:100;}
}

Observamos que la situación es la misma del ejemplo simple con dos diferencias fundamentales:

1. La capa pequeña es ahora una lista desordenada denominada scrollbox que tiene asignado scroll (overflow:auto) para poder visualizar todas las imágenes pequeñas.
2. El efecto rollover se produce en tres situaciones :active,:focus y :hover

La primera situación tiene asignada z-index:1 y para poder probarla debemos tomar el foco usando la tecla TAB.
La segunda se realiza pinchando en la imagen y vemos que debido a que z-index es 10 predomina ante la opción :active
Por fin la última :hover predomina sobre las dos anteriores ya que z-index es igual a 100

---

Para bajarse el ejemplo pulse aquí

Por fin tengo un blog

Finalmente me he decicido a crear  un blog. No lo había hecho hasta ahora  un poco por dejadez y  por falta de tiempo; a pesar de que visito con frecuencia los de muchos colegas que trabajan en programación y me aprovecho de los conocimientos que voluntariamente comparten.

Soy docente de programación del I.E.S. El Rincón de Las Palmas de Gran Canaria y estoy realizando en la actualidad, el curso on-line de Competencia Digital que organiza la Consejería de Educación.
Después de leer y observar las posibilidades que tiene el uso de la Web 2.0 en el mundo docente me convencí de la necesidad de diseñar uno.

El próposito es utilizarlo como una herramienta más de comunicación en mis clases  y, de este modo, tener más ganas y tiempo de actualizarlo durante un largo trayecto.

El título proviene de los problemas que dan  a menudo los programas que usamos en clase. En estos momentos de desesperación es cuando yo me dirijo a mis alumnos con la frase "Algo huele a podrido en Oklahoma" –risas generales- lo que sin duda es una degeneración western de la frase del Hamlet. Pero es que cuando uno nace changa …