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>