Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/09/2009, 11:40
jcouoh
 
Fecha de Ingreso: septiembre-2003
Ubicación: Merida, yucatan
Mensajes: 282
Antigüedad: 21 años, 6 meses
Puntos: 1
mostrar capas con javascript

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
__________________
Jorge Couoh es profesor de Computo. sus sitios son: Cheap Web Hostingl y Cheap web hosting Services