Buenos días!
Estoy creando una página web que va a consistir en una cuadrícula con una imágen en cada celda, y al hacer clic en cada imagen debe aparecer encima de ella un pequeño menú de dos botones.
Estoy intentando hacerlo mediante divs, tengo un div para la imagen y otro para el cuadro con los botones, y quiero que uno se sobreponga al otro. He probado con z-index pero sólo funciona si los dos div estan en posición absoluta, con lo cual no se ven dentro de la cuadrícula, sino en la esquina superior izquierda de la página.
Aquí está el código completo de la página:
Código HTML:
<html>
<head>
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js"></script>
<script language="JavaScript">
var totalLayersInLoop=1;
var layerNumShowing=1;
function init(){
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
} }
function showLayerNumber(number){
var layerNumToShow=number;
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
function showLayer(layerName){
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); }
function hideLayer(layerName){
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); }
function dyninit(){
dynAnimation();
init();
}
</script>
<style type="text/css">
.estilo {
border-color: #FF0000;
border-width: 1px;
border-style: solid;
}
#capa {POSITION: relative; Z-INDEX: 2; VISIBILITY: visible; LEFT: 0px; TOP: 0px;}
#capa2 {POSITION: relative; Z-INDEX: 3; VISIBILITY: visible; LEFT: 0px; TOP: 0px;}
</style>
</head>
<body onload="dyninit()">
<table border="0" width="100%" height="100%">
<tr>
<td width="14%" height="30%" class="estilo" align="center" valign="middle">
<div id="capa" width="100%" height="100%">
<a onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" onclick="javascript:showLayer(capa2)" href="javascript:void(0)">
<img border="0" src="imagen.gif" width="170" height="170" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="imagen2.jpg"></a>
</div>
<div id="capa2" width="100%" height="100%">
<table bgcolor="#FF0000" height="100%" width="100%">
<tr>
<td height="100%" width="100%" valign="middle" align="center">(Botones)</td>
</tr>
</table>
</div>
</td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
</tr>
<tr>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
<td width="14%" height="30%" class="estilo" align="center" valign="middle"> </td>
</tr>
</table>
</body>
</html>
Como podría hacer para que se sobrepusieran las dos capas dentro de una celda?
Muchas gracias!