Está en: Recursos web Javascript: Minimizar y maximizar capas

Minimizar, maximizar y cerrar capas con Javascript:


Con este script sencillo y muy útil para la realización de menús desplegables, trabajaremos con la propiedad display, que oculta o muestra la capa según los valores none o block, probaremos el ejemplo:

Capa 1
Capa 2
Capa 3
Para empezar creamos 6 divs en el cuerpo del documento de la siguiente forma:

<div id="titulo1" class="titulo">
Capa 1
<input name="imagefield" type="image" src="../imagenes/minimizar.jpg" onmouseover="minimizar('capa1')"/>
<input name="imagefield" type="image" src="../imagenes/encuadre.jpg" onmouseover="maximizar('capa1')"/>
<input name="imagefield" type="image" src="../imagenes/cerrar.jpg" style="margin-right:3px;" onclick="minimizar('capa1');minimizar('titulo1')"/>
</div>
<div id="capa1">
</div>
<div id="titulo2" class="titulo">
Capa 2
<input name="imagefield" type="image" src="../imagenes/minimizar.jpg" onmouseover="minimizar('capa2')" />
<input name="imagefield" type="image" src="../imagenes/encuadre.jpg" onmouseover="maximizar('capa2')"/>
<input name="imagefield" type="image" src="../imagenes/cerrar.jpg" style="margin-right:3px;" onclick="minimizar('capa2');minimizar('titulo2')"/>
</div>
<div id="capa2">
</div>
<div id="titulo3" class="titulo">
Capa 3
<input name="imagefield" type="image" src="../imagenes/minimizar.jpg" onmouseover="minimizar('capa3')"/>
<input name="imagefield" type="image" src="../imagenes/encuadre.jpg" onmouseover="maximizar('capa3')"/>
<input name="imagefield" type="image" src="../imagenes/cerrar.jpg" style="margin-right:3px;" onclick="minimizar('capa3');minimizar('titulo3')"/>
</div>
<div id="capa3">
</div>

Los estilos css de estas capas son:

.titulo{
text-align:right;
background-color:#D9D8E6;
border: 1px solid #5D5D5D;
margin: 0px;
height: 26px;
width: 300px;
padding-top:4px;}

#capa1,#capa2,#capa3 {
color: #000000;
border: 1px solid #5D5D5D;
background-color: #F3F3F3;
margin-bottom: 15px;
position: relative;
height: 150px;
width: 300px;
border-top:0px;
}

Creamos el script entre las etiquetas <head></head>, desarrollamos 2 funciones que controlen la propiedad display:

<script language="javascript" type="text/javascript"><!-- Script del tutorial-->
<!--
function minimizar(nombre_capa){
document.getElementById(nombre_capa).style.display="none";
}
function maximizar(nombre_capa){
document.getElementById(nombre_capa).style.display="block";
}
//-->
</script>

Finalmente llamamos a las funciones en los eventos omouseover o onclick de los botones.

Inicio / Servicios Web / Recursos Web / Portfolio / Enlaces / Contacto / Sitemap / Aviso Legal

Hu Creative Web Site - info@hucreative.com
www.hucreative.com