Ayuda para mejorar un efecto

axy108 · #1 (**permalink**) 06/05/2005, 08:23

Hola estoy haciendo un efecto que muestra una capa con movimiento, y quiero ver si alguien me puede ayudar a mejorarla ya que cuando le dan click en un vinculo la muestra de manera correcta y lo que quiero hacer es que cuando le den click a otro link primero cierre la capa que este abierta y despues abra la que le picaron espero alguien me pueda ayudar.

estilo.css

Código HTML:

div#contacto{
	background: #FFFFFF;
	border: solid 1px #000000;
	color: #000000;
	font: normal Verdana, Geneva, Arial, Helvetica, sans-serif;
	height: 0px;
	left: 0;
	margin-left: 0px;
	margin-top: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 0;
	width: 0px;
	z-index: 999;
}

#menu{
	background: transparent;
	color: #000000;
	font: normal 11px/32px "Courier New", Courier, monospace;
	left: 50;
	margin-left: 5px;
	margin-top: 5px;
	padding:5px 5px 5px 5px;
	position: absolute;
	top: 50;
	width: 130px;
	z-index: 99;
}

Archivo html

Código HTML:

<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
	<head>
		<title>
			Movimiento de capas
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
		<link href="estilo.css" rel="stylesheet" charset="ISO-8859-1" /> 
		<script language="JavaScript">
			var min = 0;
			var max = 250;
			var aumento = 10;
			var tam = 0;
			function mostrar(que,posx,posy){
				tam = 0;
				capa = document.getElementById('contacto');
				capa.style.width = 0 + "px";
				capa.style.height = 0 + "px";
				texto(capa);
				capa.style.top = posy + "px";
				capa.style.left = posx + "px";
				cambia(capa);
			}
			function texto(aque){
				aque.innerHTML = 'Bienvenido a este armario trastero. Aquí podreis ver todos los Javascripts que he ido realizando a lo largo de mi participación en los magníficos Foros del web. El motivo de creación de esta página es la necesidad de limpiar este servidor de basura unido al miedo que me produce el dejar a alguien sin algún ejemplo introducido en dichos Foros. Lo que empezó siendo algo provisional se ha vuelto un orden caótico de imágenes, códigos y páginas que ahora intento ordenar siguiendo el ejemplo de mi siempre querida y admirada maestra tunait. Persona de la que me he permitido robar la idea confiando en que no le moleste demasiado mi caradura.<a href="#" onClick="cerrar()">Cerrar</a>';
			}
			function cambia(que){
				if(tam <= max){
					tam = tam + aumento;
				}
				aqui = que;
				que.style.width = tam + "px";
				que.style.height = tam + "px";
				if(tam <= max){
					setTimeout("cambia(aqui)",10);
				}
			}
			function cerrar(){
				quien = document.getElementById('contacto');
				if(tam >= min){
					tam = tam - aumento;
				}
				acual = quien;
				quien.style.width = tam + "px";
				quien.style.height = tam + "px";
				if(tam >= min){
					setTimeout("cerrar(acual)",10);
				}
				else{
					capa.style.top = 0 + "px";
					capa.style.left = 0 + "px";
				}
			}
		</script>
	</head>
	<body>
		<div id="menu">
			<a href="#" onclick="mostrar('inicio',75,20)">Inicio</a><br />
			<a href="#" onclick="mostrar('descargas',75,50)">Descargas</a><br />
			<a href="#" onclick="mostrar('links',75,80)">Links</a><br />
			<a href="#" onclick="mostrar('varios',75,110)">Varios</a><br />
		</div>
		<div id="contacto"></div>
	</body>
</html>

SALUDOS: