Comunidad de diseño web y desarrollo en internet online

Efecto Fade out?

Citar            
MensajeEscrito el 05 Ago 2008 12:41 pm
Buenas, tengo una galería de fotos con algo de Java Script. Os la muestro.

Código :

    <script type = "text/javascript" language= "javascript">                           
       function cambiarDIV () {
       var img1 = "<img src='1.jpg' alt=''/>";                                                    
        document.getElementById("capa1").innerHTML = img1;                                                                                                                                       
                }
        function cambiarDIV2 () {
        var img2 = "<img src='2.jpg' alt=''/>";
        document.getElementById("capa1").innerHTML = img2;  
                }
       
        function cambiarDIV3 () {
        var img3 = "<img src='3.jpg' alt=''/>";
        document.getElementById("capa1").innerHTML = img3;
                }

        function cambiarDIV4() {
        var img4 = "<img src='4.jpg' alt=''/>";
        document.getElementById("capa1").innerHTML = img4;
                }   


</script>


y en HTML tengo una lista que será la botonera.

Código :

<body>
    <ul>                                                                                             
        <li><a href="javascript:cambiarDIV();"> img 1 </a></li>                  
        <li><a href="javascript:cambiarDIV2();"> img 2 </a></li>
           <li><a href="javascript:cambiarDIV3();"> img 3 </a></li>
        <li><a href="javascript:cambiarDIV4();"> img 4 </a></li>
    </ul>
    <div id="capa1"></div>

Y llama a la función definida en Javascript.
Lo que no se ya es como podría hacer un efecto fadeout o un fundido al cambiar de foto.
¿Alguna idea? Gracias!

Por charliechin

19 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Ago 2008 01:08 pm
Los fundidos se hacen cambiando el valor de CSS: "opacity".
Mediante el mismo JavaScript, haces que un temporizador vaaya disminutendo la opacidad de uno, y aumentando la del otro.
Cuando uno llegue al 100%, y el otro, al 0%, paras el temporizador.

Busca Fadeout, en estos foros, y encontrarás varios ejemplos (míos alguno de ellos)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 06 Ago 2008 07:20 am
Gracias Rizome. A ver si lo consigo. :)

Por charliechin

19 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Ago 2008 09:40 am
Buenas de nuevo, Como me comentó Rizome, he buscado un tutorial sobre este tema y me ha solucionado a medias mi galería xD (Estoy aprendiendo un montón!) me encuentro con un problema ahora, la primera imagen si me hace el efecto fade que buscaba, pero creo que al ser window.onload sólo me lo hace con la primera imagen cargada. Este es el código del Script que he utilizado.

Código :


document.write("<style type='text/css'>#img1 {visibility:hidden;}</style>");

function initImage() {
  //
  imageId = 'img1';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId, 0);
};
function setOpacity(obj, opacity) {
  opacity = (opacity == 100) ? 99.999 : opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari anterior a 1.2, Konqueror
  obj.style.KHTMLOpacity = opacity /100;
  
  // anteriores Mozilla y Firefox
  obj.style.MozOpacity = opacity /100;
  
  // Safari 1.2, posterior Firefox y Mozilla, CSS3
  obj.style.opacity = opacity /100;
}

function fadeIn(objId,opacity) {
  //
  if (document.getElementById) {
    //
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      //
      setOpacity(obj, opacity);
      opacity += 10;
      //
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
  }
}

window.onload = function() {
  //
  initImage()
};


(este código sumado al que puse arriba) entonces si le quito el id='image1' de la foto principal y le pongo esa id al botón 2 me da un error, Firebug me comenta que obj is null, obj.style.filter = "alpha(opacity:"+opacity+")";

No entiendo la verdad por que no funciona, yo creo que es por el window.onload. Es así?

Por charliechin

19 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Ago 2008 10:10 am
Ese código, es para que la imagen id="img1", aparezca tras un fundido (por eso lo hace tras un onLoad).
Tú quieres otra cosa.
Tú quieres que, al pulsar en las diferentes imagenes de la galería, estas vayan desapareciendo y apareciendo secuencialmente.

  • Debes cambiar los eventos (serían "onclick") para "initImage".
  • Debes crear una función más "fadeOut" (para que des-aparezca la imagen anterior)
  • Podrías reutilizar "setOpacity"
  • Deberías readaptar "initImage", para que haga ambas cosas, llamar a "fadeOut" para la imagen antigua, y a "fadeIn" para la imagen nueva


Si te van saliendo dudas puntuales, ya sabes dónde estamos.
;)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 16 Abr 2009 12:00 pm
cuando quiero ver el ejemplo me tira

The domains mediamax.com and streamload.com are for sale.

Submit all offers to: @#$%@&$@
:wink:

Por manugogli

3 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.