Foros del Web - Ver Mensaje Individual

_Richi_ · #1 (**permalink**) 30/12/2009, 06:06

Hola a todos.
Quiero colocar varias capas en un <td>. Para que esas capas se muevan cuando se mueva la tabla debo establecerlas con position:relative.
Mi problema es que al alternar con javascript la visibilidad de las capas no aparecen en el mismo sitio sino que aparece una debajo de la otra.
No sé si me he explicado bien, dejo un código de ejemplo con el problema.
Gracias de antemano y un saludo.

Código HTML:

Ver original<html>
    <head>
        <title>
            P&aacute;gina con dos capas.
        </title>
        <script type="text/javascript" language="javascript">
            function noOcultar(nombreCapa){
                var capa=document.getElementById(nombreCapa);
                capa.style.visibility="visible";
                var capas=document.getElementsByTagName("div");
                for(var i=0;i<capas.length;i++){
                    if(capas[i].id!=nombreCapa){
                        capas[i].style.visibility="hidden";
                    }
                }   
            }
        </script>
    </head>
    <!-- Poner dos capas dentro de un td e intentar que se vean en el mismo sitio
    cuando se alterna la visibilidad de las dos -->
    <body>
        <center>
        <br><br>
        <button type="button" onclick="noOcultar('capa2');">Ver capa amarilla</button>
        &nbsp;&nbsp;
        <button type="button" onclick="noOcultar('capa1');">Ver capa azul</button>
        <br><br>
        <table border="1">
            <tr>
                <td width="250px" height="250px">&nbsp;</td>
                <td width="250px" height="250px">&nbsp;</td>
            </tr>
            <tr>
                <td width="250px" height="250px" align="center">
                    <div id="capa1" style="background-color:blue;position:relative;
                    left:10px;top:10px;width:200px;height:200px;visibility:visible;border:solid"/>
                    </div>
                    <div id="capa2" style="background-color:yellow;position:relative;
                    left:10px;top:10px;width:200px;height:200px;visibility:hidden;border:solid"/>
                    </div>
                </td>
                <td width="250px" height="250px">&nbsp;</td>
            </tr>
        </table>
        </center>
    </body>
</html>