Foros del Web » Programando para Internet » Javascript »

Itercambiar capas con efecto fade

Estas en el tema de Itercambiar capas con efecto fade en el foro de Javascript en Foros del Web. Hola buenas,soy nuevo por estos lares,espero poder ayudar y resolver dudas de otros y propias, bueno al grano ;) Soy bastante malo con JS, y ...
  #1 (permalink)  
Antiguo 22/02/2009, 11:58
 
Fecha de Ingreso: febrero-2009
Mensajes: 7
Antigüedad: 15 años, 2 meses
Puntos: 0
Itercambiar capas con efecto fade

Hola buenas,soy nuevo por estos lares,espero poder ayudar y resolver dudas de otros y propias, bueno al grano ;)

Soy bastante malo con JS, y aunque encotre por la red u codigo para mostrar y ocultar capas soy incapaz de encontrar uno que lo haga con efecto fade al cargar la capa.

La idea es tener 4 capas distitas y al pulsar en una imagen se cargue la 1, otra imagen se cargue la 2 etc... asi hasta 4, pero me gustaria ponerle efecto fade o algo similar para darle un toque mas vistoso.

Conoceis alguna web donde tengan algo similar o algun codigo de ejemplo?

Gracias!
  #2 (permalink)  
Antiguo 22/02/2009, 12:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Itercambiar capas con efecto fade

Hola HadesD, bienvenido a los foros :

Si esas capas tienen el mismo tamaño puede hacerse superponiéndolas, pero de otra manera no creo que sea un efecto aplicable. La cuestión es superponer las capas y disminuir la opacidad de la capa superior, o tener esa capa "invisible" incrementando su opacidad... el problema está en que explorer tiene su propia forma de aplicar la opacidad, así que es obligado discriminar... para que sea más fácil, tal vez te interese algún código ya hecho... creo que puedes encontrarlo en la página de tunait (es moderadora de este foro)... y no olvides respetar las condiciones de uso.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 22/02/2009, 13:29
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 2 meses
Puntos: 53
Respuesta: Itercambiar capas con efecto fade

Aqui puedes ver un efecto de fade para un div, creo que te va a servir.

http://remsr.com/articulos/fade_noob.php

no te olvides de comentar.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #4 (permalink)  
Antiguo 22/02/2009, 14:37
 
Fecha de Ingreso: febrero-2009
Mensajes: 7
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Itercambiar capas con efecto fade

Gracias a los dos.
Si serian capas de un mismo tamaño.
Ahora pruebo tu codigo Dalvenjha! ^^
  #5 (permalink)  
Antiguo 23/02/2009, 04:17
 
Fecha de Ingreso: febrero-2009
Mensajes: 7
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Itercambiar capas con efecto fade

Hola tengo un problemita.
Partiendo de un codigo que encontre por el foro(creo que es tuyo caricatos) y de la informacion de Dalvenjha e sacado esto:

Código PHP:
<style>
div {displaynone;}
span {cursorpointer;}
#roja {
background-colorred;
 
width:400px;
 
height:200px;
 
color:#fff;
 
display:none;

}
#verde {
 
background-colorgreen;
 
width:400px;
 
height:200px;
 
color:#fff;
 
display:none;
}
#azul {background-color: blue;
 
width:400px;
 
height:200px;
 
color:#fff;
 
display:none;}
</
style>
<
script>
var 
color 0;
var 
suma 10;
var 
capas = ["roja""verde""azul"];
function 
mostrar(capa){
for (
0total capas.lengthtotal++)
var 
obj document.getElementById(capas[i]);
obj.style.display = (capas[i] == capa) ? "block":"none"
color += suma;
if (!(
color>=110)){
obj.style.filter 'alpha(opacity='+color+')';
obj.style.opacity color /100;
obj.style.MozOpacity color /100;
obj.style.KHTMLOpacity color /100;
window.setTimeout ("mostrar();"100);
}}
</script>
Mostramos capa:
<span onclick="mostrar('roja')">roja</span>
<span onclick="mostrar('verde')">verde</span>
<span onclick="mostrar('azul')">azul</span>
<div id="roja">roja</div>
<div id="verde">verde</div>
<div id="azul">azul</div> 
Basicamente como se ve no tengo ni IDEA de JS ^^u, intente adaptarlos como pude,pero funciona mal,me explico.
Pulse donde pulse SIEMPRE me carga el layer azul, y cuando le doy a otro tras darle clik a uno,no me carga nada,se queda totalmente en blanco.

Solucion?... muchas gracias y disculpad las molestias.
  #6 (permalink)  
Antiguo 23/02/2009, 04:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Itercambiar capas con efecto fade

Hola:

Pues el estilo parece el mío, pero supongo que se tratará de algo "híbrido" porque también hay cosas que no suelo usar... de todos modos, no creo que imoporte la autoría, pero si piensas usarlo, debes respetar las condiciones del autor (algunos ponen condiciones y otros no, pero es bueno indicar las fuentes...), bueno, dejando de lado las cosas legales, sería bueno saber de dónde lo has sacado, y conocer el código completo (lo que atañe al caso)...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 23/02/2009, 06:12
 
Fecha de Ingreso: febrero-2009
Mensajes: 7
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Itercambiar capas con efecto fade

Hola caricatos, aqui esta el codigo original de cambio de capas:
forosdelweb.com/f13/mostrar-capas-528829/

Gracias!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:28.