Mostrar imagenes en capa

veriyo · #1 (**permalink**) 11/07/2011, 04:57

Saludos a todos!!!

Explico lo que quiero conseguir. Quisiera abrir unas imagenes en una capa cuando le damos al enlace correspondiente a cada imagen. Lo que nose es como hacer para que las imagenes se muestren en la capa..... os dejo el codigo que quedará mas claro.

Código HTML:

<HTML>
<HEAD>
<title>Mostrar Ficheros</title>

<style type="text/css">
<!--
#cp_contenedor_miniaturas {
	position:absolute;
	left:143px;
	top:4px;
	width:134px;
	height:120px;
	z-index:1;
	visibility: visible;
}
#cp_contenedor_ficheros {
	position:absolute;
	left:4px;
	top:4px;
	width:132px;
	height:70px;
	z-index:2;
	visibility: visible;
}
-->
</style>
</HEAD>

<BODY>
<div id="cp_contenedor_miniaturas">
</div>
<div id="cp_contenedor_ficheros" style="overflow:auto">
	<table width="113" height="100">
	<tr>
	<td width="103"><a href="img/10406p.jpg" title="Ventana">ventana.jpg</a></td>
	</tr>
	<tr>
	<td><a href="img/bola.bmp" title="Bola">bola.bmp</a></td>
	</tr>
	<tr>
	<td><a href="img/291.png"  title="Abstracto">abstracto.png</a></td>
	</tr>
	<tr>
	<td>nubes.gif</td>
	</tr>
	<tr>
	<td>mar.bmp</td>
	</tr><tr>
	<td>noche.jpg</td>
	</tr>
	</table>
</div>
</BODY>

</HTML>

gracias!!!

kafok · #2 (**permalink**) 11/07/2011, 08:29

Mira, para empezar el href deberia ser # porque no vas a ir a ninguna pag, solo vas a mostrar una imagen en la misma. Tienes que crear una funcion en js que reciba el parametro de la url de la imagen, la funcion hara el siguiente efecto que solo te doy un ejemplo, ya tu la haces a tu gusto:

-Crea un div que ocupe toda la pg: 100%x100%
-Lo estilizas: yo le pondria el fondo negro y un 25% de transparencia
-Creas una imagen y la centras. En el atributo src pones el parametro de la url de la imagen
-Y crea algun modo de salir, borra la capa cuando se pulse escape o alguna x en una esquina

Cuando la tengas creada en el evento onclick del enlace deveria quedar: onclick="tu_funcion('url de la imagen'); return false;"

veriyo · #3 (**permalink**) 12/07/2011, 02:38

Perdona pero no entiendo muy bien lo de cambar el href por #, te refieres a esto??

Código HTML:

<a href="#img/10406p.jpg" title="Ventana">ventana.jpg</a>

aunque supongo que será muy basico estoy un poco verde.....

caricatos · #4 (**permalink**) 12/07/2011, 04:11

Hola:

Lo de poner "#" en un enlace es en realidad para enlazar al tope de la página, pero no creo que eso sea lo que pretendes... lo que hace un enlace es siempre enlazar, a no ser que se cancele enviando el valor false al evento asociado:

onclick="return false"...

Pienso que lo estabas haciendo bien, porque enlazabas a esa imagen, pero te falta el "efecto" que quieres, que puede hacerse de dos maneras: poner la imagen como fondo de esa capa, o insertar una etiqueta imagen; y de los 2, yo me decantaría por el primero porque evitarías el código para crear y borrar elementos, y además, sería más fácil su posicionamiento. Por ejemplo añadiendo en la declaración de estilos, los ídem background-position (por ejemplo con "center center"), y background-repeat con "no_repeat".

Luego simplemente te quedaría poner esa imagen como fondo de la capa:

Código:

onclick="document.getElementById('cp_contenedor_miniaturas').style.backgroundImage = 'url(" + this.href + ")'; return false"

Saludos