Galeria de imagenes con Java

serviciosdobled · Dec 13, 2010

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=new Image; d.FP_imgs.src=a; }
}

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 · Dec 13, 2010

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/fresh-jquery-image-gallery-display-solutions/

detodoseries · Dec 14, 2010

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

Galeria de imagenes con Java

serviciosdobled

Member

miguelkp

Member

detodoseries

Community Advocate

Free Web Hosting

Our Community

Legal