capa hidden

[kaninox]

hola como puedo hacer aparecer una capa con una imagen...

digo hacer una capa que esta sobre la pagina que no se ve o sea en hidden, y con pinchar una imagen hacerla aparecer, y que esta capa tenga otra imagen con la opcion de hacerla hidden nuevamente se puede...

lo que pasa es que necesito enviar imagenes a la capa con php, o sea tengo una consulta donde traigo varias imagenes y al clickar una la ponga en grande pero con una capa algo tipo lightbox, lo que pasa esque esto esta en un iframe y el lightbox aqui no me sirve
saludos :)...

[Yaraher]

A mi parecer, tu mejor opción es utilizar Javascript para identificar el elemento, y cambiar su estilo para inhabilitar el "hidden". Esta función debería ser invocada por un evento onClick emitido por la imagen invocadora.

Si no deseas usar Javascript puro, puedes probar con alguna de terceros. Una biblioteca Js bastante ligera y sencilla es Mootools, incluye selectores para identificar tu capa y aplicarle ese comportamiento.

Para el evento de cierre, la lógica sería similar.

Suerte!

[kaninox]

wuau impresionante mootools vamos a tener que ver como le aplico que no es mi fuerte el javascript :P

gracias por el dato

[JavierB]

Movido al foro de JavaScript desde Css.

Saludos,

[kaninox]

gracias por moverlo, ahora estuve viendo Mootools pero no entiendo nada, alguien que le pegue al tema sabe que debo descargar para que funcione lo que nesesito :)

gracias...

[Asyolath]

Te refieres a hacer algo como lo de esta pagina?
http:// moncastel.9online.fr/gimg/gimg4.htm

[caricatos]

Hola:

La verdad es que no es nada difícil de implementar

En principio debes considerar si quieres que se preserve el espacio o no... también el tipo de posicionamiento...

Si la capa debe superponerse al contenido global, deberías definirla con los estilos position: absolute, y una ubicación y tamaño precisos... por ejemplo:
#capa {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 200px;
visibility: hidden;
}

Luego deberías implementar un par de funciones para mostrar y ocultar la "capa":
function mostrar(id) {
document.getElementById(id).style.visibility = "visible";
}

... para ocultar, lo mismo pero en vez de "visible", "hidden"...

Luego en la imagen/botón el evento: onclick="mostrar('capa')"
... y dentro de la capa (deberás acomodar los elementos a tu gusto)... un botón que ponga:
onclick="ocultar('capa')"

Inténtalo, y si te trabas, no dudes en preguntar.

Saludos

[kaninox]

de hecho ya lo habia hecho asi :P pero me parece que formule mal mi pregunta, lo que sucede que cualquier capa que habra dentro del iframe se vera solo hay si la imagen es mas grande que el iframe se pierde, creo que tendre que recurrir a los popups, ya que trate con dom tambien con el lightbox para que tomara el parent pero ni haci me va :P

se supone que en el parent pongo una funcion
function anchor(url,title) {
var link = document.createElement("a");
link.setAttribute('rel','lightbox');
link.setAttribute('href',url);
link.setAttribute('title',title);
myLightbox.start(link);
}

y en el iframe pongo

<a href="javascript:anchor('imagen.jpg','Imagen de Prueba')"> imagen </a>

codigo:proporcionado por quest .... :)

pero no me resulto tampoco y probando de varias formas :P

[Calisco]

Yo he realizado algunos ejemplos de Mootools.
El blog es blog.cabezaderaton.com.ar.
Saludos.