Como conseguir este diseño

srwolfman · #1 (**permalink**) 11/03/2007, 14:33

Hola
Mirar exactamente no se si es el sitio correcto pero no se exactamente donde ponerlo.
La cuestión es que en mi blog uso una opción para mostrar ocultar información y lo que me gustaría hacer es que cada vez que le doy en algún apartado se muestre y cuando le doy a otro se muestre y oculte el otro.
Tengo algo parecido en el blog pero no se oculta cuando selecciono otro apartado.
Todo esto viene porque un dia vi una página que lo hacia y me gustaría aplicarlo.

Saludos

FNX_NET · #2 (**permalink**) 11/03/2007, 15:44

podrias masndar el link

aunque eso me suena que se hace un javascripts, o de forma mas sofisticada en ajax, puedes postear alli tu problema y te ayudaran

srwolfman · #3 (**permalink**) 11/03/2007, 16:50

OK repetire el post en javascript Sobre el link a que te refieres a donde lo vi, por desgracia no lo tengo y sobre mi blog no me deja hasta que no lleve una cantidad de entradas pero seria srwolfman.blogspot.com

yournightmare86 · #4 (**permalink**) 12/03/2007, 04:57

Pues mira te dejo un ejemplo que juega con la propiedad hidden de las capas usando javascript.

Código:

<html>
<head>
<STYLE TYPE="text/css">
		#capa0{background-color:turquoise;
			   position:absolute; top:20px; left:50px; width:508px; height:75px;}
		
		#capa1{background-color:lightblue;visibility:hidden;
			   position:absolute; top:100px; left:100px; width:400px; height:300px;}
			   
		#capa2{background-color:yellow;visibility:hidden;
			   position:absolute; top:100px; left:100px; width:400px; height:300px;}
		
		#capa3{background-color:orange;visibility:hidden;
			   position:absolute; top:100px; left:100px; width:400px; height:300px;}
			   
		#capa4{background-color:pink;visibility:hidden;
			   position:absolute; top:100px; left:100px; width:400px; height:300px;}
		
		#ninguna{background-color:lawngreen;
			   position:absolute; top:100px; left:100px; width:400px; height:300px;}
		
		
</style>
<script>
function ocultar()
{


document.all.capa1.style.visibility='hidden';
document.all.capa2.style.visibility='hidden';
document.all.capa3.style.visibility='hidden';
document.all.capa4.style.visibility='hidden';
document.all.ninguna.style.visibility='hidden';
}

function mostrar(n)
{
switch (n)
{
	case 1:
	document.all.capa1.style.visibility='visible';
	break;
	case 2:
	document.all.capa2.style.visibility='visible';
	break;
	case 3:
	document.all.capa3.style.visibility='visible';
	break;
	case 4:
	document.all.capa4.style.visibility='visible';
	break;
}
}
	
</script>
</HEAD>
<BODY>
<div id="capa0">
Haz click en la foto q deseas ver
<br>
<A HREF="javascript:ocultar();mostrar(1);">foto 1</a>
<A HREF="javascript:ocultar();mostrar(2);">foto 2</a>
<A HREF="javascript:ocultar();mostrar(3);">foto 3</a>
<A HREF="javascript:ocultar();mostrar(4);">foto 4</a>


</div>
<center>
<div id="capa1">
imagenes
<p><img border="0"src="foto1.jpg" width="300" height="300"></p>
bonita
</div>

<div id="capa2">
imagenes
<p><img border="0"src="foto2.jpg" width="300" height="300"></p>
preciosa
</div>

<div id="capa3">
imagenes
<p><img border="0"src="foto3.jpg" width="300" height="300"></p>
yo quiero :(
</div>

<div id="capa4">
imagenes
<p><img border="0"src="foto4.jpg" width="300" height="300"></p>
oooleeee!!!!!
</div>

<div id="ninguna">
<hr size="5">
HAZ CLICK EN LA FOTO Q KIEREAS VER
<hr size="5">
</div>


</BODY>
</HTML>

Este ejemplo es una galería de fotos, que juega con capas, y cuando pinchas en el link de cada capa, oculta la activa y deja visible la que pulsaste. Pruebalo y pon las imagenes que quieras, el resto será adaptarlo a lo que quieras.

srwolfman · #5 (**permalink**) 12/03/2007, 07:24

Hola y merci por contestar yournightmare86.
Pero el ejemplo tienes que ir creando capas para hecerlo y yo necesito un efecto acordeon que he encontrado pero aun no se muy bien como aplicarlo.
Lo encontre en ...moofx.mad4milk.net/#prototype lo de prototype es por que uso esa coleccion para otra funcion de los comentarios.
Saludos

yournightmare86 · #6 (**permalink**) 12/03/2007, 09:41

Si me pones el link de una página como ejmplo puedo tratar de mirarlo, pero vamos mejor te asesorarán en el foro de Javascript.

srwolfman · #7 (**permalink**) 12/03/2007, 19:13

Cita:

Iniciado por yournightmare86

Si me pones el link de una página como ejmplo puedo tratar de mirarlo, pero vamos mejor te asesorarán en el foro de Javascript.

Hola mira yo de momento no puedo poner enlaces a otras páginas pero en:
ht...moofx.mad4milk.net/#prototype que esta en ingles puedes ver lo que digo y si te vas a mi perfil tienes la dirección de mi blog.
Gracias
Mirare en el foro de javascript.

guillermorafael · #8 (**permalink**) 13/03/2007, 00:31

con vbscript puedes hacer aparecer y desaparecer cualquier objeto
en la pantalla htm.