JAVASCRIPT - Efecto difuminado (fade)

Efecto difuminado (fade)

Compatibilidad: Ms Internet Explorer, Netscape
Típico efecto difuminado (fade) de texto sobre fondo oscuro. El ejemplo funciona correctamente con MSIE y Netscape en su cuarta versión.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE>

ie4 = ((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion) >= 4 ))
          ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

if (ns4) {
            layerRef="document.layers";
            styleRef="";
          } else {
            layerRef="document.all";
            styleRef=".style";
          }

<whew> After 2 days of researching and parsing the codes of others
 i finally was able to make a text fade-in/out script <g>

Unfortunately, this can only do 3 colors, Red, Green and Blue.
 But don't worry, I'm working on it so that it'll work with any color
 and background. And do excuse the extra codes... this is my
 first script.

Anyway, feel free to use the script but do pls include this little
 copyright...

Emmanuel C. Halos - agent_teg@ThePentagon.com Copyright 1997
 script created : 23 December 1997

"What a Cold Christmas this is going to be...."

btw, the script works for IE4 and NS4 :)

var convert = new Array();
          var hexbase = new Array("0", "1", "2", "3", "4", "5", "6", "7", 
                                  "8", "9", "A", "B", "C", "D", "E", "F");
          var value=0;
          var rgb;

for (x=0; x<16; x++) {
                for (y=0; y<16; y++) {
                        convert[value] = hexbase[x] + hexbase[y];
                        value++;
                }
           }

function Fade(wColor, inout, speed, textDisp, topx, leftx) {
            if (ns4) {
                    eval(layerRef + '["Last"]' + styleRef + '.top = topx'); 
                    eval(layerRef + '["Last"]' + styleRef + '.left = leftx'); 
            } else {
                    eval(layerRef + '["Last"]' + styleRef + '.posTop = topx')
                    eval(layerRef + '["Last"]' + styleRef + '.posLeft = leftx');
            }

if (inout == 1) {
                if (wColor < 255) {
                  wColor+=speed;
                  if (wColor > 255) wColor=255; 
                  changeContent(wColor, textDisp);
                 
setTimeout("Fade("+wColor+","+inout+","+speed+",'"+textDisp+"',"+topx+","+leftx+")",0);
                }
            } else {
                if (wColor > 0) {
                  wColor-=speed;
                  if (wColor < 0) wColor=0;
                  changeContent(wColor, textDisp);
                 
setTimeout("Fade("+wColor+","+inout+","+speed+",'"+textDisp+"',"+topx+","+leftx+")",0);
                } 
            }

}

/*
 * Statement : Fade("Last", initialvalue [0-255], fade[fadein=1,fadeout=0], speed, textDisp string);
 */

function introduction() {
          Fade(255, 0, 4, '<span class=BigLet>Q</span><span class=small>uesto script</span><span class=BigLet> è </span><span class=small>fornito da HTMLpoint</span>', 50, 150);
          setTimeout("Fade(0, 1, 4, '<span class=small>funziona con IE 4 e NS 4</span>', 170, 120)",7000);
          setTimeout("Fade(255, 0, 4, '<span class=small>Scarica la GUIDA al linguaggio HTML</span>', 120, 170)",19000);
          setTimeout("Fade(0, 1, 4, '<span class=small>.. e firma il libro degli ospiti</span>', 70, 100)",28000);
          setTimeout("Fade(255, 0, 4, '<span class=small>Author: <a href=http://www2.mozcom.com/~halos>Teg</a></span>', 170, 90)",38000);
          setTimeout("Fade(0, 1, 4, '<span class=small>Scrivi ad HTMLpoint <a href=mailto:mvalente@cdq.it>mvalente@cdq.it</a></span>', 170, 50)",48000);
        }

</script>

</HEAD>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]