Posicionar / Disponer Capas??

Jomer_zgz · #1 (**permalink**) 25/04/2007, 02:19

Muy buenas gente,

Lo que estoy desarrollando ahora se me plantea de una forma un poco novedosa para mí.

Mi duda es si una capa se puede disponer al frente o atrás de otra.
Doy por supuesto que no, que para ello debería variar el código y ponerla antes o después, pero... Si a alguien se le ocurre algo, que me comente!

Un saludo!

PD: No quiero usar flash ;)

vash-stampede- · #2 (**permalink**) 25/04/2007, 04:29

Supongo ke lo querras para que al pulsar un boton aparezcan y desaparezcan como tu quieras no?

Yo lo tengo en una página y así me funciono

Código PHP:

  <div id="monumento1" style="visibility:hidden; position:absolute;">

Luego ya necesitaras poner el resto si quieres te lo pongo

Código PHP:

  <head>

<title>-- BEJAR --</title>

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

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

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

 
function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

 
function MM_showHideLayers() { //v6.0

  var i,p,v,obj,args=MM_showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

    obj.visibility=v; }

}

//-->

</script>

</head>

<body>

<div id="content">

    <div id="cabecera">

        <img src="imagenes/cabecera.jpg" alt="cabecera">

    </div> 

    <div id="menu">

        <div id="dolphincontainer">

            <div id="dolphinnav">

                <ul>

                    <li><a href="index.html" title="Bejar"><span>Bejar</span></a></li>

                    <li><a href="historia.html" title="Historia"><span>Historia</span></a></li>

                    <li><a href="monumentos.html" title="Monumentos" class="current"><span>Monumentos</span></a></li>

                    <li><a href="tradiciones.html" title="Traciciones"><span>Tradiciones</span></a></li>

                    <li><a href="local.html" title="Localización"><span>Localización</span></a></li>

                    <li><a href="alojamientos.html" title="Alojamientos"><span>Alojamientos</span></a></li>

                    <li><a href="imagenes.html" title="Imágenes"><span>Imágenes</span></a></li>

                </ul>

            </div>

        </div>

    </div>

    <div id="contenido_sin"> 

      <div id="menu_contenido">

        <br><br><br>

            <table border="0" align="center" width="150">

                <tr valign="top">

                    <td>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento1','','show')">

                            <img src="imagenes/mon1.jpg" border="0">

                        </a>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento2','','show')">

                            <img src="imagenes/mon2.jpg" border="0">

                        </a>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento3','','show')">

                            <img src="imagenes/mon3.jpg" border="0">

                        </a>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento4','','show')">

                            <img src="imagenes/mon4.jpg" border="0">

                        </a>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento6','','hide','monumento7','','hide','monumento5','','show')">

                            <img src="imagenes/mon5.jpg" border="0">

                        </a>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento7','','hide','monumento6','','show')">

                            <img src="imagenes/mon6.jpg" border="0">    

                        </a>

                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','show')">

                            <img src="imagenes/mon7.jpg" border="0">

                        </a>

                    </td>

                </tr>

            </table>

      </div>

        <div id="contenido_con">

            <div id="general" style="position:absolute;">

                <br>

                <div class="titulos1" align="center">MONUMENTOS</div>

                <br>

                <table border="0" width="560">  

                    <tr>

                        <td align="center">

                            <img src="imagenes/ayuntamiento.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Ayuntamiento

                        </td>

                        <td align="center">

                            <img src="imagenes/bosque.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Bosque

                        </td>

                        <td align="center">

                            <img src="imagenes/convento.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Convento de San Francisco

                        </td>

                    </tr>

                    <tr>

                        <td align="center">

                            <img src="imagenes/plazato.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Plaza de Toros

                        </td>

                        <td align="center">

                            <img src="imagenes/palacioducal1.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Palacio Ducal

                        </td>

                        <td align="center">

                            <img src="imagenes/teatro.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Teatro Cervantes

                        </td>

                    </tr>

                    <tr>

                        <td colspan="3" align="center">

                            <img src="imagenes/murallas.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>

                            Las Murallas

                        </td>

                    </tr>

                </table> 

            </div>

            <div id="monumento1" style="visibility:hidden; position:absolute;">

                <table width="560">

                <tr>

                <td>

                <br>

                <div class="titulos1" align="center">PALACIO DUCAL</div>

                </div>

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

            </div>

Espero te sirva. El resto de las capas no las pongo ppk son iguales jeje
Ya me comentaras

Rafael · #3 (**permalink**) 28/04/2007, 10:56

Con css si puedes modificar la posición de las "capas" independientemente del lugar del código donde estén. Juega con esto:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
div#1, div#2, div#3{width: 100px; height: 100px; position: absolute;}

div#1 {
background-color: red;
top: 50px;
left: 50px;
z-index: 1;}
div#2 {
background-color: green;
top: 70px;
left: 70px;
z-index: 2;}
div#3 {
background-color: blue;
top: 90px;
left: 90px;
z-index: 3;}

</style>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</body>
</html>