Galeria de imagenes con Java

**serviciosdobled** · 12-13-2010 08:27 AM

Hola gente, como va tanto tiempo? Queria hacerles una consulta y de ser posible ayudarme.
Estoy haciendo una galeria de muestra para mi pagina web reemplazando el comando hover, focus y active con javascript.
Les escribo abajo el código de la pagina pero lo que me falta lograr es que cuando clickeo sobre una de las fotos que quede y si paso sobre las otras que las muestre igual (con el z-index se que se puede esto ultimo) sin sacar la otra al menos de que haga click fuera de la tabla. No se si se me entendio pero bueno, les dejo la inquietud. Gracias.

Archivo galeria.html
<html>

<head>

<title>Efectos en imágenes pegadas a un texto</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="taller/capas.css">

<style type="text/css">

</style>

<script language="JavaScript" src="capas.js">
</script>

</head>

<body>
<table border="1" cellspacing="1" cellpadding="0">
<tr>
<td align="center" valign="middle">xxxxxxxxx</td>
<td align="center" valign="middle">

<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%"><tr>
<td valign="middle" height="227" width="300"><div style="position:relative;width:100%; height:100%">
<div id="capa1">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><img src="taller/01.gif"></td>
</tr>
</table>
</div>
<div id="capa2">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><img src="taller/02.gif"></td>
</tr>
</table>
</div>
<div id="capa3">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><img src="taller/03.gif"></td>
</tr>
</table>
</div>
<div id="capa4">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><img src="taller/04.gif"></td>
</tr>
</table>
</div>
<div id="capa5">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><img src="taller/05.gif"></td>
</tr>
</table>
</div>
<div id="capa6">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><img src="taller/06.gif"></td>
</tr>
</table>
</div>
</div></td>
</tr>
<tr><td height="10"></td></tr>
<tr><td align="center" valign="middle">

<table border="1" cellspacing="0" cellpadding="0"><tr>
<td onMouseOver="mostrar1(this);" onMouseOut="ocultar1(this);" align="center" valign="middle" height="30" width="30"><img src="taller/01.jpg"></td>
<td onMouseOver="mostrar2(this);" onMouseOut="ocultar2(this);" align="center" valign="middle" height="30" width="30"><img src="taller/02.jpg"></td>
<td onMouseOver="mostrar3(this);" onMouseOut="ocultar3(this);" align="center" valign="middle" height="30" width="30"><img src="taller/03.jpg"></td>
<td onMouseOver="mostrar4(this);" onMouseOut="ocultar4(this);" align="center" valign="middle" height="30" width="30"><img src="taller/04.jpg"></td>
<td onMouseOver="mostrar5(this);" onMouseOut="ocultar5(this);" align="center" valign="middle" height="30" width="30"><img src="taller/05.jpg"></td>
<td onMouseOver="mostrar6(this);" onMouseOut="ocultar6(this);" align="center" valign="middle" height="30" width="30"><img src="taller/06.jpg"></td>
</tr></table>

</td>
</tr>
</table>

</td>
</tr>
</table>

<div id="menu">
<ul id="menu_li" type="circle">
<li><a href="#noir">inicio 1</a></li>
<li><a href="#noir">inicio 2</a></li>
<li><a href="#noir">inicio 3</a></li>
</ul>
</div>

</body>
</html>

archivo capas.js
img01=new Image(297,223);
img01.src="01.gif";
img02=new Image(297,223);
img02.src="02.gif";
img03=new Image(297,223);
img03.src="03.gif";
img04=new Image(297,223);
img04.src="04.gif";
img05=new Image(297,223);
img05.src="05.gif";
img06=new Image(297,223);
img06.src="06.gif";

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function mostrar1(){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

document.getElementById('capa1').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar1(){

document.getElementById('capa1').style.visibility = 'hidden';
}
function mostrar2(){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

document.getElementById('capa2').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar2(){

document.getElementById('capa2').style.visibility = 'hidden';
}

function mostrar3(){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

document.getElementById('capa3').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar3(){

document.getElementById('capa3').style.visibility = 'hidden';
}
function mostrar4(){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

document.getElementById('capa4').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar4(){

document.getElementById('capa4').style.visibility = 'hidden';
}
function mostrar5(){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

document.getElementById('capa5').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar5(){

document.getElementById('capa5').style.visibility = 'hidden';
}
function mostrar6(){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

document.getElementById('capa6').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar6(){

document.getElementById('capa6').style.visibility = 'hidden';
}

archivo capas.css
#capa1 {
position: absolute;
visibility: hidden;
width:100%;
height:100%;
}
#capa2 {
position: absolute;
visibility: hidden;
width:100%;
height:100%;
}
#capa3 {
position: absolute;
visibility: hidden;
width:100%;
height:100%;
}
#capa4 {
position: absolute;
visibility: hidden;
width:100%;
height:100%;
}
#capa5 {
position: absolute;
visibility: hidden;
width:100%;
height:100%;
}
#capa6 {
position: absolute;
visibility: hidden;
width:100%;
height:100%;
}

**miguelkp** · 12-13-2010 04:14 PM

Supongo que quieres hacer tu propio código. De todos modos, te sugiero que eches un vistazo a la librería jQuery de Javascript. Hay muchas galerías hechas con esa librería de hecho. En mi portfolio uso una galería que se llama PrettyPhoto.
Puedes ver una lista de casi 40 galerías hechas con jQuery aquí, por si te interesa alguna:
http://www.1stwebdesigner.com/design...lay-solutions/

**detodoseries** · 12-14-2010 02:04 PM

Buenas,

Aun que creo que este tema tendria que ir en ayuda webpero no se xD

Pero en fin...Mira si te vale este http://tunait.com/javascript/index.php?s=popupfotos2

Saludos

Thread: Galeria de imagenes con Java

LinkBack

Thread Tools

Display

Galeria de imagenes con Java

Re: Galeria de imagenes con Java

Re: Galeria de imagenes con Java

Similar Threads

Galeria de imagenes con Java

Problema con IE, no muestra las imagenes

Diseño de imagenes

No se muestran las imagenes

Funciones de imágenes

Posting Permissions