Galería de imágenes con CSS

[mcarmenpbarranco]

Hola! Tengo una galería en mi página que al posicionar el ratón sobre las miniaturas se ve la imagen en grande, pero yo lo que quiero es que se vea cuando haces click sobre ellas y que se quede fija hasta que no hagas click en otra, y ya para rizar el rizo que cuando abras se vea alguna foto.

Os dejo la página:

http://dipweb.es/dipweb1

Y el código que tengo ahora mismo

<div id="galery">
<a class="thumb" > <img src="images/opiniom.jpg" width="75" height="75" alt="opinio" longdesc="http://dipweb.es" />
<span> <img src="images/opinio.jpg" width="596" height="450" alt="opinio" longdesc="http://dipweb.es" /><br />
Web Librería </span> </a> </div>

CSS:

.galery {
width: auto;
padding: 1em;
text-align: center;
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;
}
.galery p {
color: #272d4d;
font-family: "Andale mono", "Trebuchet MS", sans-serif;
font-size: 12px;
line-height: normal;
}

.thumb img {
border: 2px solid #FFB350;
margin: 0 3px 5px 3px;
}

.thumb:hover img {
border: 2px solid #272d4d;
}

.thumb span {
position: absolute;
top: 200px;
left: -1000px;
color: #272d4d;
font-family: "Andale mono", "Trebuchet MS", sans-serif;
font-size: 12px;
visibility: hidden;
}

.thumb:hover span {
visibility: visible;
right: 0;
top: 200px;
left: 0;
width: auto;
bottom: 0;
height: 80%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.thumb span a img {
border: 1px solid #000;
padding: 5px 5px 5px 5px;
background-color: ##272d4d;

}

Gracias

[pzin]

Con CSS no podrás hacerlo, tendrás que preguntar en el foro de JavaScript.

[mcarmenpbarranco]

Gracias por responder.

Es que he visto este ejemplo y funciona:

http://www.cssplay.co.uk/menu/photo_album#nogo

Pero yo no consigo que me funcione.

Un saludo

[mcarmenpbarranco]

Bueno señores aquí estoy de nuevo:

Solucioné el tema de que la imagen se quedara fija cuando seleccionamos sobre la miniatura. Aquí os dejo la solución que encontré (creo que en un ejemplo que vi por aquí). Simplemente le puse la propiedad tabindex a la clase de las miniaturas.

Ahora bien, no tengo ni idea de porqué esto resulta así, me gustaría que alguien me lo explicara. Si necesitan que ponga ejemplo de lo que hice en html o css lo pongo.

Otra cosa, resulta que la página tiene estilos como sombreado y cuando estoy trabajando en ella y quiero ver el resultado en IE 10 que es el que tengo lo veo estupendo, PERO, cuando lo subo a mi espacio/servidor esa propiedad no se ve, tampoco funciona la fijación de la imagen seleccionada.

Muchas gracias por su ayuda