Galeria de imagenes con Java

Messages
49
Reaction score
0
Points
6
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">
<!--
#menu {
border-top: 1px solid #ff9900;
border-left: 1px solid #ff9900;
border-right: 1px solid #ff9900;
display: block;
text-align: center;
width: 18%;
}
#menu_li {
border-style: none;
text-decoration: none;
list-style-type: none;
}
#menu_li a:hover {
background-color: #ff6666;
}
-->
</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%;
}
 
Top