El 05/08/2010 04:06 a.m., Dani F. Serch escribió:
> Entiendo que tú lo usas en enlaces, no?
>
> Quizá lo que buscas es una combinación entre active y visited?? No lo sé.
>
En realidad, Dani, uso una combinación de :active y :focus, y sí, lo uso
en enlaces.
Y gracias Tei por la sugerencia, pero justamente el desafío cuando
apliqué este código fue hacerla solo con CSS, sin scripts.
Les copio el código que uso a ver si alguien lo quiere probar:
<div class="contenedorGaleria">
<ul class="galeria1" >
<li><a href="javascript:void(0);">01<img src="1.jpg" alt="gato" /></a></li>
<li><a href="javascript:void(0);">02<img src="2.jpg" alt="perro" /></a></li>
<li><a href="javascript:void(0);">03<img src="3.jpg" alt="liebre"
/></a></li>
<li><a href="javascript:void(0);">04<img src="4.jpg" alt="conejo"
/></a></li>
<li><a href="javascript:void(0);">05<img src="5.jpg" alt="leon" /></a></li>
<li><a href="javascript:void(0);">06<img src="6.jpg" alt="tigre" /></a></li>
<li><a href="javascript:void(0);">07<img src="7.jpg" alt="pato" /></a></li>
<li><a href="javascript:void(0);">08<img src="8.jpg" alt="cisne"
/></a></li>
<li><a href="javascript:void(0);">09<img src="9.jpg" alt="caballo"
/></a></li>
<li><a href="javascript:void(0);">10<img src="10.jpg" alt="gallo"
/></a></li>
</ul>
</div>
Y la parte CSS:
.contenedorGaleria {
width: 480px; /* el ancho total de la galería */
height: 400px; /* el alto total de la galería */
margin: 0px auto;
background: #EEEEEE url(1.jpg) no-repeat scroll 0px 0px; /* la imagen
que se verá por defecto, ubicada en el contenedor */
border: 1px solid #AAAAAA;
text-align: center;
}
.galeria1 {
position: relative; /* para que sirva de coordenada a los absolutos
internos que tenga */
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior debe ser igual al alto
de la imagen, para que la lista "baje" */
padding: 0;
list-style-type: none;
}
.galeria1 img {
border: none;
}
.galeria1 li {
float: left;
}
/* estos son los enlaces con numeritos del menú inferior */
.galeria1 li a, .galeria1 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;
}
.galeria1 li a img {
position: absolute; /* para posicionarla con relación al contenedor */
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se sube, compensando el margin que había
bajado a todo el menú de numeritos */
border: none;
}
.galeria1 li a:hover {
background-color: #DDDDDD; /* efecto de rollover */
}
.galeria1 li a:active img, .galeria1 li a:focus img {
visibility: visible; /* se muestra la imagen al hacer click (foco o
pulsarla) */
}
.galeria1 li a:active, .galeria1 li a:focus {
background-color: #C2C4D0;
}
Las últimas dos declaraciones son las que tienen problemas en WebKit, ya
que usan :focus y :active (ya no sé cuál de los dos será el problemático).
¿Alguna pista?
Gracias!
--
Hernán Beati
http://www.saberweb.com.ar
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
