Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Diseño web (http://www.forosdelweb.com/f91/)
-   -   Como conseguir este diseño (http://www.forosdelweb.com/f91/como-conseguir-este-diseno-471969/)

srwolfman 11/03/2007 14:33
Como conseguir este diseño
 
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 11/03/2007 15:44
Re: Como conseguir este diseño
 
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 11/03/2007 16:50
Re: Como conseguir este diseño
 
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 12/03/2007 04:57
Re: Como conseguir este diseño
 
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 12/03/2007 07:24
Re: Como conseguir este diseño
 
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 12/03/2007 09:41
Re: Como conseguir este diseño
 
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 12/03/2007 19:13
Re: Como conseguir este diseño
 
Cita:
Iniciado por yournightmare86 (Mensaje 1925807)
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 13/03/2007 00:31
Re: Como conseguir este diseño
 
con vbscript puedes hacer aparecer y desaparecer cualquier objeto
en la pantalla htm.


La zona horaria es GMT -6. Ahora son las 03:31.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.