Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Javascript (http://www.forosdelweb.com/f13/)
-   -   FadeOut en un talbla (http://www.forosdelweb.com/f13/fadeout-talbla-159137/)

epplestun 15/10/2003 10:23
[Resuelto]FadeOut en un talbla
 
Buenas, me a entrado la duda si se podria hacer una cosa o no, la cuestion es: para un enlace se que se puede hacer un fadeOut, es decir, de negro a blanco progresivamente, se que para los links se pued hacer, pero queria saber si tambien funciona sobre celdas de tablas o capas.

El codigo que hace eso para los enlaces es:

Código PHP:
/*************
**** <config>
**/

startColor = "#002e59"; // initial link color
endColor = "#ffffff";  // final link color

stepIn = 17; // delay when fading in
stepOut = 17; // delay when fading out

/*
** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = false;  

/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true; 

/** 
**** </config>
**************/

/*************
**** <install>
**

Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):

<script src="fade.js" language="Javascript"></script>

Now that you have the file included, you need to
setup your links a small bit.  Each link that you
want to fade needs to use the fade class.

Example:

<a href="blah.html" class="fade">click here</a>

Also, the link must be plain text.  This means
that you can't have <b>'s, <i>'s, <font>'s, etc.
inside of the link.

Example of what not to do:

<a href="blah.html" class="fade"><b>click</b> here</a>

Have fun!
-Anarchos-

** 
**** </install>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
    var colorArr = new makearray(3);
    for (i=1; i<7; i++){
        for (j=0; j<16; j++){
            if (Color.charAt(i) == hexa[j]){
                if (i%2 !=0)
                    colorArr[Math.floor((i-1)/2)]=eval(j)*16;
                else
                    colorArr[Math.floor((i-1)/2)]+=eval(j);
            }
        }
    }
    return colorArr;
}

function domouseover() {
  if(document.all){
      var srcElement = event.srcElement;
      if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(startColor,endColor,srcElement.uniqueID,stepIn);      
   }
}

function domouseout() {
  if (document.all){
      var srcElement = event.srcElement;
    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(endColor,startColor,srcElement.uniqueID,stepOut);
    }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){
    var sr = s[0]; var sg = s[1]; var sb = s[2];
    var er = e[0]; var eg = e[1]; var eb = e[2];
    
    if (fadeId[0] != null && fade[0] != element){
        setColor(sr,sg,sb,eval(fadeId[0]));
        var i = 1;
        while(i < fadeId.length){
            clearTimeout(fadeId[i]);
            i++;
            }
        }
        
    for(var i = 0; i <= step; i++) {
        fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
            step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
            ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
        }
    fadeId[0] = element;
} 
Bueno si a alguien le apatece sacar como seria para una celda pos que nos avise ;-).

Muchas gracias de antemano :-D

KarlanKas 16/10/2003 05:46
Hola epplestun!

Mira, te soy sincero... me da mucha pereza estudiar el script que tan amablemente has puesto, y he hecho en mis limitados conocimientos algo que seguro que es menos versatil, pero funciona más o menos. Dime si te funciona.


Código PHP:
<html>
<head>
<style>
td{font:normal 10px/10px verdana;
padding:20px 20px 20px 20px;
}

</style>

<script>
maximo=255;
minimo=100;

r=maximo;
g=maximo;
b=maximo;
function iluminar(esto,incremento){

esto.style.backgroundColor="RGB("+r+","+g+","+b+")";
//esto.innerHTML="<b>R:</b> "+r+"<BR><b>G: </b>"+g+"<br><b>B: </b>"+b;
r+=incremento;b+=incremento;g+=incremento
eso=esto;
elincremento=incremento
if(r>minimo && r<maximo){seguir=window.setTimeout("iluminar(eso,elincremento)",10);}
else{r-=incremento;g-=incremento;b-=incremento;}


}
</script>
</head>

<body>

<table>
<tr>
<td  onmouseout="iluminar(this,1)" onmouseover="iluminar(this,-1)" >Hola que tal estamos!!
</td></tr>
</table>

</body>
</html> 

KarlanKas 16/10/2003 06:00
Jugando lo he cambiado un poco para que puedas elegir que cambiar, si texto o fondo...
Código PHP:
<html>
<head>
<style>
td{font:normal 10px/10px verdana;
padding:20px 20px 20px 20px;
border:solid 1px black;
}

</style>

<script>

//--------VARIABLES MODIFICABLES----------------
maximo=255;
minimo=0;
incrementor=2;
modificar="fondo" //"texto" o "fondo"
//----------------------------------------------


r=maximo;
g=maximo;
b=maximo;
switch(modificar){
case "texto":
loQueSeModifica="color";
invertido="maximo-";
break;
case "fondo":
invertido="";
loQueSeModifica="backgroundColor";
break;
}

function iluminar(esto,variacion){
incremento=variacion*incrementor;
eval('esto.style.'+loQueSeModifica+'="RGB("+('+invertido+'r)+","+('+invertido+'g)+","+('+invertido+'b)+")"');
r+=incremento;b+=incremento;g+=incremento;
eso=esto;
elincremento=variacion;
if(r>minimo && r<maximo){seguir=window.setTimeout("iluminar(eso,elincremento)",10);}
else{r-=incremento;g-=incremento;b-=incremento;}


}
</script>
</head>

<body>

<table>
<tr>
<td  onmouseout="iluminar(this,1)" onmouseover="iluminar(this,-1)" >Hola que tal estamos!!
</td></tr>
</table>

</body>
</html> 

epplestun 16/10/2003 07:29
Muchas gracias, funciona muy bien, pero para que haga el fade al reves?¿? es decir va de blanco a negro, como seria de negro a blanco=?¿ o como seria si yo quiero convinar dos colores?¿

KarlanKas 16/10/2003 08:38

En el segundo ejemplo que he puesto lo he hecho para que haga fade del fondo o del texto (es decir que lo haga del blanco al negro o del negro al blanco...

Para los colores esperate que sigo en ello. Pero si lo quieres en blanco y negro, el máximo es lo más claro (en formato 0-255) y el mínimo lo más claro.

caricatos 16/10/2003 10:35
Hola epplestun, hola KarlanKas :adios: :

Tengo un script que varía de forma aleatoria los colores de fondo y el tiempo y las veces que se realiza el cambio en las líneas de una tabla.

Se puede ver el efecto en este link .

El código es:

Código PHP:
var psico = ["red", "pink", "magenta", "yellow", "lime", "aqua", "blue"];

function fondoEnPasos(n, id, color)    {
    if (n > 0)    {
        document.getElementById(id).style.backgroundColor = psico[Math.floor(Math.random() * psico.length)];
        var linea = "fondoEnPasos(" + (n - 1) + ", '" + id + "', '" + color + "')";
        setTimeout(linea, 50 * Math.floor(Math.random() * 5));
    }
    else
    document.getElementById(id).style.backgroundColor = color;
} 
Se puede usar en cualquier elemento (por supuesto que en celdas), y para invocarlo, hay que poner algo así:
onmouseout='fondoEnPasos(numeroDePasos, this.id, colorFinal)'

Saludos :arriba:

KarlanKas 16/10/2003 11:31
Muy chulo tu script, caricatos.

Yo por mi parte he seguido con lo que pedía epplestun y cada vez se complica más la cosa.

Falta depurarlo, pero he conseguido que pase de un color a otro. para definir los colores debes utilizar el formato de RGB(255,255,255).

A lo que le quieras dar el fade le debes poner "class=pepe"

Tiene un bug. No puede haber una diferencia absoluta igual entre el valor de inicio y final de dos o de los tres parámetros (R, G o B).

Sería así:

Código:
<html>
<head>
<style>
td{font:normal 10px/10px verdana;
padding:20px 20px 20px 20px;
border:solid 1px black;
}

</style>

<script>

//--------VARIABLES MODIFICABLES----------------
maximoR=255;
maximoG=0;
maximoB=255;

minimoR=2;
minimoG=255;
minimoB=1;

incrementor=1;
modificar="fondo" //"texto" o "fondo"
//----------------------------------------------

diferenciaR=maximoR-minimoR;
diferenciaG=maximoG-minimoG;
diferenciaB=maximoB-minimoB;



if(Math.abs(diferenciaR)>Math.abs(diferenciaG) && Math.abs(diferenciaR)>Math.abs(diferenciaB)){
incrementoR=incrementor
incrementoG=(diferenciaG/diferenciaR)*incrementor
incrementoB=(diferenciaB/diferenciaR)*incrementor
subidar=(diferenciaR>0)?1:-1;
chequeoLetra="r"

}

if(Math.abs(diferenciaG)>Math.abs(diferenciaB) && Math.abs(diferenciaG)>Math.abs(diferenciaR)){
incrementoG=incrementor
incrementoB=(diferenciaB/diferenciaG)*incrementor
incrementoR=(diferenciaR/diferenciaG)*incrementor
subidar=(diferenciaG>0)?1:-1;
chequeoLetra="g"

}


if(Math.abs(diferenciaB)>Math.abs(diferenciaG) && Math.abs(diferenciaB)>Math.abs(diferenciaR)){
incrementoB=incrementor
incrementoG=(diferenciaG/diferenciaB)*incrementor
incrementoR=(diferenciaR/diferenciaB)*incrementor
subidar=(diferenciaB>0)?1:-1;
chequeoLetra="b";

}


document.onmouseover=bajar;
document.onmouseout=subir;

r=maximoR;
g=maximoG;
b=maximoB;

switch(modificar){
case "texto":
loQueSeModifica="color";
modificael=""
break;
case "fondo":
loQueSeModifica="backgroundColor";
modificael="background-"
break;
}

document.write("<style>.pepe{"+modificael+"color:rgb("+maximoR+","+maximoG+","+maximoB+");}</style>");

function subir(){
var cosa = event.srcElement;
increm=subidar;
if(cosa.className=="pepe"){

iluminar(cosa,increm);
}
}

function bajar(){
var cosa = event.srcElement;
increm=-1*subidar;
if(cosa.className=="pepe"){
iluminar(cosa,increm);
}
}


function iluminar(esto,variacion){

incrementoRojo=variacion*incrementoR;
incrementoVerde=variacion*incrementoG;
incrementoAzul=variacion*incrementoB;


eval('esto.style.'+loQueSeModifica+'="RGB("+(r)+","+(g)+","+(b)+")"');
r+=incrementoRojo;b+=incrementoAzul;g+=incrementoVerde;
eso=esto;
elincremento=variacion;

if(eval(chequeoLetra+"!=minimo"+chequeoLetra.toUpperCase()+" && "+chequeoLetra+"!=maximo"+chequeoLetra.toUpperCase())){seguir=window.setTimeout("iluminar(eso,elincremento)",10);}
else{r-=incrementoRojo;g-=incrementoVerde;b-=incrementoAzul;}


}

</script>
</head>

<body>

<table  >
<tr>
<td class="pepe">Hola que tal estamos!!
</td><td>Yo estoy bien, y tú?</td></tr>
<tr>
<td >Hola que tal estamos!!
</td><td >Yo estoy bien, y tú?</td></tr>
</table>

</body>
</html>

KarlanKas 16/10/2003 11:35

Y con lo que has puesto prueba a ver si funciona esto...

Código PHP:
/*************
**** <config>
**/

startColor = "#002e59"; // initial link color
endColor = "#ffffff";  // final link color

stepIn = 17; // delay when fading in
stepOut = 17; // delay when fading out

/*
** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = false;  

/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true; 

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
    var colorArr = new makearray(3);
    for (i=1; i<7; i++){
        for (j=0; j<16; j++){
            if (Color.charAt(i) == hexa[j]){
                if (i%2 !=0)
                    colorArr[Math.floor((i-1)/2)]=eval(j)*16;
                else
                    colorArr[Math.floor((i-1)/2)]+=eval(j);
            }
        }
    }
    return colorArr;
}

function domouseover() {
  if(document.all){
      var srcElement = event.srcElement;
      if ((autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(startColor,endColor,srcElement.uniqueID,stepIn);      
   }
}

function domouseout() {
  if (document.all){
      var srcElement = event.srcElement;
    if ((autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(endColor,startColor,srcElement.uniqueID,stepOut);
    }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){
    var sr = s[0]; var sg = s[1]; var sb = s[2];
    var er = e[0]; var eg = e[1]; var eb = e[2];
    
    if (fadeId[0] != null && fade[0] != element){
        setColor(sr,sg,sb,eval(fadeId[0]));
        var i = 1;
        while(i < fadeId.length){
            clearTimeout(fadeId[i]);
            i++;
            }
        }
        
    for(var i = 0; i <= step; i++) {
        fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
            step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
            ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
        }
    fadeId[0] = element;
} 

KarlanKas 16/10/2003 11:38
No era tan complicado modificar el script...

Ya lo tienes!:-D

epplestun 17/10/2003 00:58
Muchas gracias a los dos, la cuestion .... en la celda que le meto?¿ onMouseOver="domouseover();"?¿? por que con class="fade" dentro de la celda, lo que me modifica es el texto y no el fondo de la celda

epplestun 17/10/2003 01:24
Bueno, ya esta modificando un poco el code de caricatos :D (muxaS GRACIAS) y haciendo uso de un script de http://www.maxxblade.co.uk/fade/index.htm para conseguir los colores que yo quiera de tal a tal X numero, me queda:

Código PHP:
<script>
var psico = ["#000000", "#0F0F0F", "#1F1F1F", "#2F2F2F", "#3F3F3F", "#4F4F4F", "#5F5F5F", "#6F6F6F", "#7F7F7F", "#8F8F8F", "#9F9F9F", "#AFAFAF", "#BFBFBF", "#CFCFCF", "#DFDFDF", "#EFEFEF", "#FFFFFF"];

function changeColor(n) {
    if (n > 0) {
        document.getElementById('id').style.backgroundColor = psico[(n - 1)];
        /*for(i = 0; i < 17; i++) {
            document.getElementById('id').style.backgroundColor = psico[i];
        }*/
        var linea = "changeColor(" + (n - 1) + ")";
        setTimeout(linea, 100);
    } else {
        document.getElementById('id').style.backgroundColor = psico[17];
    }
}
</script>
<table>
    <tr>
        <td id="id" onMouseOver="changeColor(17);" onMouseOut="this.style.backgroundColor='#ffffff'">xxx</td>
    </tr>
</table> 
Hay que hacerle unos retoques y listo :D

epplestun 17/10/2003 01:27
El code del generador :-D

Código PHP:
<table border="0" cellpadding="5" cellspacing="0" class="pagebody">
        <tr><td valign="top" class="side">            
            </td><td valign="top" class="main">
            <form name="fader" action="JavaScript:calccol();">
                    <table border="0" cellpadding="3" cellspacing="3" style="border-collapse: collapse" bordercolor="#111111">
                        <tr>
                            <td width="50%" align="right"><b>Colour 1</b></td>
                            <td width="50%">#<input type="text" name="color1" size="7" value="000000"></td>
                        </tr>
                        <tr>
                            <td width="50%" align="right"><b>Colour 2</b></td>
                            <td width="50%">#<input type="text" name="color2" size="7" value="FFFFFF"></td>
                        </tr>
                        <tr>
                            <td width="50%" align="right"><b>Steps</b></td>
                            <td width="50%"><input type="text" name="nosteps" size="4" value="10"></td>
                        </tr>
                        <tr><td colspan="2"><input type="submit" value="Generate Fade Array" name="B1"></td></tr>
                    </table>
                <p><b><font size="4"><span id="testtext">THIS IS TEST TEXT</span></font></b></p>
                <p align="center">
                <textarea rows="4" name="output" cols="74" class="codeexample" onclick="this.select();" readonly>Fade Array Will Appear Here</textarea>
                </p>
            </form>
            </blockquote>
          </td></tr>

    </table>

      </center>
</div>
<script language="JavaScript">
var updown = 1; var ud = 1; var he = "0123456789abcdef"; var c = he.split('');
var colour = new Array();
var upanddown;
function calccol(){
    colour = new Array();
    clearTimeout(upanddown);
    var c1 = document.fader.color1.value.toLowerCase().split('');
    var c2 = document.fader.color2.value.toLowerCase().split('');
    var steps = document.fader.nosteps.value-1;
    colour[0] = document.fader.color1.value.toUpperCase();
    for (n=1; n<steps;n++){
        var red = ((he.indexOf(c1[0])*16)+he.indexOf(c1[1]))+(n*(((he.indexOf(c2[0])*16)+he.indexOf(c2[1]))-((he.indexOf(c1[0])*16)+he.indexOf(c1[1])))/steps);
        var green = ((he.indexOf(c1[2])*16)+he.indexOf(c1[3]))+(n*(((he.indexOf(c2[2])*16)+he.indexOf(c2[3]))-((he.indexOf(c1[2])*16)+he.indexOf(c1[3])))/steps);
        var blue = ((he.indexOf(c1[4])*16)+he.indexOf(c1[5]))+(n*(((he.indexOf(c2[4])*16)+he.indexOf(c2[5]))-((he.indexOf(c1[4])*16)+he.indexOf(c1[5])))/steps);
        colour[n] = String(c[parseInt(red/16)]+c[parseInt(red-(parseInt(red/16)*16))]+c[parseInt(green/16)]+c[parseInt(green-(parseInt(green/16)*16))]+c[parseInt(blue/16)]+c[parseInt(blue-(parseInt(blue/16)*16))]).toUpperCase();
    }
    colour[colour.length] = document.fader.color2.value.toUpperCase();
    document.fader.output.value="";
    for (n=0;n<colour.length;n++){
    document.fader.output.value+='"#'+colour[n]+'"';
    if(n<colour.length-1) document.fader.output.value+=', ';
    }
    upd();
}
function upd(){
    updown += ud;
    document.all['testtext'].style.color = '#'+colour[updown];
    if ((updown >= colour.length-1)||(updown < 1)){
        var tud = 0-ud;
        ud = tud;
    }
    upanddown = setTimeout("upd()",50);
}
</script> 

caricatos 17/10/2003 04:27
Hola otra vez:

KarlanKas :adios: : Tienes razón en que mi propuesta se salía del tema, pero tenía la intención de mostrar un sistema de transición que funciona a partir del id, y lo más importante "sencillo"... :pensando:

La verdad es que el código de epplestun :adios: me asustó un poco al verlo en tantas líneas, pero luego lo vi en acción con tu ejemplo y pensé que mis líneas habían sido una especie de "metedura de pata", hasta que vi que con pocos ajustes podía quedar mejor según la nueva adaptación de epplestun.

En base a esta última, pensé que se podía lograr el efecto inverso, y que poner en el evento un valor numérico era poco "bonito", y usé una función adicional en donde se pone esa línea.

Aquí está el código retocado:

Código PHP:
var fondos = ["#000000", "#0F0F0F", "#1F1F1F", "#2F2F2F", "#3F3F3F", "#4F4F4F", "#5F5F5F", "#6F6F6F",
        "#7F7F7F", "#8F8F8F", "#9F9F9F", "#AFAFAF", "#BFBFBF", "#CFCFCF", "#DFDFDF", "#EFEFEF", "#FFFFFF"];

function transitarColor(id, n) {
    var yo = document.getElementById(id);
    var _n = parseInt(yo.getAttribute("cambiandoColor"));
    if (n > 0 && n < 16) {
        yo.style.backgroundColor = fondos[n];
        var linea = "transitarColor('" + id + "', " + (n + _n) + ")";
        setTimeout(linea, 60);
    }
    else    {
        yo.style.backgroundColor = fondos[n];
        document.getElementById(id).setAttribute("cambiandoColor", "0");
    }        
}

function changeColor(id) {
    var estado = document.getElementById(id).getAttribute("cambiandoColor");
    document.getElementById(id).setAttribute("cambiandoColor", "-1");
    if (estado == "0" || estado == null)    transitarColor(id, 15);
}

function recuperaColor(id)    {
    var estado = document.getElementById(id).getAttribute("cambiandoColor");
    document.getElementById(id).setAttribute("cambiandoColor", "1");
    if (estado == "0")    transitarColor(id, 1);
} 
Lo mejor del sistema es que se invoca así:

onmouseover="changeColor(this.id)"
onmouseout="recuperaColor(this.id)"

Saludos :arriba:

caricatos 17/10/2003 05:26
Hola otra vez:

Subí una página para mostrar el efecto en filas, pero va bien en cualquier elemento con id. Incluso creo que se podría poner un id dinámicamente si no lo tuviese... :pensando:

El link es este: http://www.pepemolina.com/tags/

Saludos :arriba:

epplestun 17/10/2003 05:28
JEJE mola :D jeje funciona bastante bien de momento, nose si lo aplicare al final pero weno .... jeje muxas gracias!!!!


La zona horaria es GMT -6. Ahora son las 09:55.

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