11-mar-2007, 14:33
|
#1 (permalink) |
 
Fecha de Ingreso: marzo-2007
Mensajes: 10
|
Como conseguir este diseño
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 |
|
|
|
11-mar-2007, 15:44
|
#2 (permalink) |
 
Fecha de Ingreso: marzo-2004
Ubicación: EN EL INFIERNO.....
Mensajes: 1.333
   |
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
__________________
:-D "Que se libere del cielo confinado; que mi cuerpo sea la espada de hielo negro que nos lleve al abismo; que ningún poder pueda detenernos...Destructora de las almas de los dioses!!!":adios: :pirata: |
|
|
|
|
11-mar-2007, 16:50
|
#3 (permalink) |
|
Fecha de Ingreso: marzo-2007
Mensajes: 10
|
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
|
|
|
|
|
12-mar-2007, 04:57
|
#4 (permalink) |
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 833
|
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:
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.<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>
|
|
|
|
|
12-mar-2007, 07:24
|
#5 (permalink) |
|
Fecha de Ingreso: marzo-2007
Mensajes: 10
|
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 |
|
|
|
|
12-mar-2007, 19:13
|
#7 (permalink) |
|
Fecha de Ingreso: marzo-2007
Mensajes: 10
|
Re: Como conseguir este diseño
Cita:
Hola mira yo de momento no puedo poner enlaces a otras páginas pero en:
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.
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. |
|
|
|
Mode Lineal
