ocultar y mostrar capas

[fenix0224]

hola tengo una lista de imagenes organizadas en una tabla. Lo que quiero hacer es que al darle clic en la imagen esta se muestre mas grande pero en una capa superpuesta al demas contenido de la pagina se puede hacer esto porfa pasenme el codigo si se puede hacer esto.

Actualmente nego usando el eventon onclick dentro de la etiqueta <img scr=>
y hago un window.open() pero lo que io quiero es que se muestre en la misma pagina en una capa superior

[David]

¿Quieres algo al estilo lightbox?

[CHuLoSoY]

Si lo quieres hacer tú mismo tienes que combinar javascript con css.

La capa sería
<div id=imagen></div>

La clase css:

Código:

.capaGrande {
position:absolute;
left:100px;
top:50px;
width:100%;
height:100%;
}

el javascript

Código:

function abrirImg(cual) {

document.getElementById("imagen").className="capaGrande";
document.getElementById("imagen").innerHTML="<img src='"+cual+"' border=0 align=center>";

}

y lo llamas:

<img src=imagenpequena.png onclick=javascript:abrirImg('imagenpequenagrande.p ng');>

Por ejemplo.

Dado este ejemplo, haciendo un par de chanchullos y un poco de css y te queda ¡muacs! cojonudo.

[fenix0224]

gracias david se ve muy bonito lo que me recomiendas tratare de implementarlo.

gracias chulosoy me funcino ala perfecion pero dos preguntas como centro la capa osea que paresca al centro de la pagina y otra pregunta con haria pa que al hacer click sobre la capa esta desaparesca

[CHuLoSoY]

Amigo, CSS y HTML es lo básico para diseñar webs. Vamos a ver. Para centrar la capa en la página modificas los parámetros LEFT y TOP del css junto con WIDTH y HEIGHT. Left se refiere a la cantidad de píxeles desde la izquierda donde empezar a dibujar la capa. Lo mismo con top pero desde arriba. Width y height son ancho y alto en píxeles respectivamente.
Para cerrar, no hay más que meterle el evento onclick en la capa y una función de vaciado igual que lo que he dicho. Ejemplo:

Código:

function abrirImg(cual) {

document.getElementById("imagen").className="capaGrande";
document.getElementById("imagen").innerHTML="<img ONCLICK=javascript:cerrarImg(); src='"+cual+"' border=0 align=center>";

}

function cerrarImg(){
document.getElementById("imagen").innerHTML="";
document.getElementById("imagen").className="";
}

no es tan difícil, es pensar.