mostrar capas con javascript

jcouoh · #1 (**permalink**) 17/09/2009, 11:40

Hola amigos,

He trabajado intentando hacer algo asi como una plantilla que sirve para la siguiente en un menu colocado a la izquierda hacer clic y mostrar el contenido de un div en la columna a la derecha.

Si hay otro enlace en el menu, al hacer clic sustituir el contenido anterior por el contenido de otro div en la misma columna a la derecha.

para ello tengo tres codigos uno hmtl, otro css y otro javascript

lo pongo a su consideracion y si alguien puede orientarme para ver que hace falta por lo que no consigo el resultado se lo agradecere.

Codigo HTML

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 

Transitional//EN">
<html>
<head>
<title>Publi-kt</title>
<link rel="stylesheet" href="librerias/estilo_001.css" 

type="text/css" media="all">
<script type="text/javascript" 

src="librerias/mostrarcapas.js"></script>

</head>
<body>
<div id="contenedorprincipal"> 
	<div id="cabecera"> 

		<div id="izquierdacabecera">

		<div class="efectotitulo">	
Publi-kt</div> <div class="slogan">y te llegarán<br>clientes 

que jamás<br>imaginaste...
			</div>
	
		</div>
		<div id="derechacabecera">
		</div>

	</div>
	<div id="columnas"> 


		<div id="columna1">
<a href="javascript:toggleDivOL('toHide');" title="Hide the 

DIV">Mensaje 1</a><br>
<a href="javascript:toggleDivOL('toHide2');" title="Hide the 

DIV">Mensaje 2</a>
		

		</div>


		<div id="columna2">
			<div id="toHide" class="testDiv">

Mensaje 1
			</div>		
			<div id="toHide2" class="testDiv">

Mensaje 2
			</div>
		</div>

	</div>





</div>
</body>
</html>

Codigo CSS

Código HTML:

#columnas{ 
    background-color: #cccccc; 
    color: #333300; 
    font-size:12pt; 
    font-weight: bold; 
    padding:  0 0 0 0px; 
   
} 

#columna1{ 
 
    float:left; 

} 

#columna2{ 
 
    float:right; 

} 

.testDiv {
	width: 300px;
	padding: 5px;
	background-color: #DDD000;
	color: #CC0000;
	border: 1px solid #000000;
	font-weight: bold;
}

Codigo Javascript:

Código HTML:

function toggleDivOL( elemID )
{
	var elem = document.getElementById( elemID );
	if( elem.style.position != 'absolute' )
	{
		elem.style.position = 'absolute';
		elem.style.left = '-4000px';
	}
	else
	{
		elem.style.position = 'relative';
		elem.style.left = '0px';
	}
}

Les agradezco de antemano

JOrge

mayid · #2 (**permalink**) 17/09/2009, 16:44

El tema ya fue muy tratado. Usa el buscador para leer las repuestas en otros posts. Dale?

Podes usar divs ocultos y mostrarlos con:
elem.style.visibility = 'visible';

o tambien podes jugar con innerHTML hasta donde se.