Foros del Web » Programando para Internet » Javascript »

FadeOut en un talbla

Estas en el tema de FadeOut en un talbla en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/10/2003, 11:23
Avatar de epplestun  
Fecha de Ingreso: octubre-2001
Mensajes: 1.621
Antigüedad: 18 años, 2 meses
Puntos: 5
Exclamación [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 
010i++)
    
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=1i<7i++){
        for (
j=0j<16j++){
            if (
Color.charAt(i) == hexa[j]){
                if (
i%!=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 
1<= ni++)
        
this[i] = 0;
    return 
this;
}

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

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

function 
fade(s,eelement,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 
1;
        while(
fadeId.length){
            
clearTimeout(fadeId[i]);
            
i++;
            }
        }
        
    for(var 
0<= stepi++) {
        
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
__________________
Usuario registrado de Linux #288725

Última edición por KarlanKas; 17/10/2003 a las 03:53
  #2 (permalink)  
Antiguo 16/10/2003, 06:46
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 18 años, 1 mes
Puntos: 61
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> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 16/10/2003, 07:00
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 18 años, 1 mes
Puntos: 61
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> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #4 (permalink)  
Antiguo 16/10/2003, 08:29
Avatar de epplestun  
Fecha de Ingreso: octubre-2001
Mensajes: 1.621
Antigüedad: 18 años, 2 meses
Puntos: 5
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?¿
__________________
Usuario registrado de Linux #288725
  #5 (permalink)  
Antiguo 16/10/2003, 09:38
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 18 años, 1 mes
Puntos: 61

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.
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #6 (permalink)  
Antiguo 16/10/2003, 11:35
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 9 meses
Puntos: 1279
Hola epplestun, hola KarlanKas :

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(nidcolor)    {
    if (
0)    {
        
document.getElementById(id).style.backgroundColor psico[Math.floor(Math.random() * psico.length)];
        var 
linea "fondoEnPasos(" + (1) + ", '" id "', '" color "')";
        
setTimeout(linea50 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
  #7 (permalink)  
Antiguo 16/10/2003, 12:31
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 18 años, 1 mes
Puntos: 61
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>
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #8 (permalink)  
Antiguo 16/10/2003, 12:35
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 18 años, 1 mes
Puntos: 61

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 
010i++)
    
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=1i<7i++){
        for (
j=0j<16j++){
            if (
Color.charAt(i) == hexa[j]){
                if (
i%!=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 
1<= ni++)
        
this[i] = 0;
    return 
this;
}

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

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

function 
fade(s,eelement,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 
1;
        while(
fadeId.length){
            
clearTimeout(fadeId[i]);
            
i++;
            }
        }
        
    for(var 
0<= stepi++) {
        
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;

__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 16/10/2003 a las 12:42
  #9 (permalink)  
Antiguo 16/10/2003, 12:38
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 18 años, 1 mes
Puntos: 61
No era tan complicado modificar el script...

Ya lo tienes!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #10 (permalink)  
Antiguo 17/10/2003, 01:58
Avatar de epplestun  
Fecha de Ingreso: octubre-2001
Mensajes: 1.621
Antigüedad: 18 años, 2 meses
Puntos: 5
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
__________________
Usuario registrado de Linux #288725

Última edición por epplestun; 17/10/2003 a las 02:11
  #11 (permalink)  
Antiguo 17/10/2003, 02:24
Avatar de epplestun  
Fecha de Ingreso: octubre-2001
Mensajes: 1.621
Antigüedad: 18 años, 2 meses
Puntos: 5
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 (
0) {
        
document.getElementById('id').style.backgroundColor psico[(1)];
        
/*for(i = 0; i < 17; i++) {
            document.getElementById('id').style.backgroundColor = psico[i];
        }*/
        
var linea "changeColor(" + (1) + ")";
        
setTimeout(linea100);
    } 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
__________________
Usuario registrado de Linux #288725
  #12 (permalink)  
Antiguo 17/10/2003, 02:27
Avatar de epplestun  
Fecha de Ingreso: octubre-2001
Mensajes: 1.621
Antigüedad: 18 años, 2 meses
Puntos: 5
El code del generador

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 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=1n<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-1document.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> 
__________________
Usuario registrado de Linux #288725
  #13 (permalink)  
Antiguo 17/10/2003, 05:27
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 9 meses
Puntos: 1279
Hola otra vez:

KarlanKas : 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"...

La verdad es que el código de epplestun 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(idn) {
    var 
yo document.getElementById(id);
    var 
_n parseInt(yo.getAttribute("cambiandoColor"));
    if (
&& 16) {
        
yo.style.backgroundColor fondos[n];
        var 
linea "transitarColor('" id "', " + (_n) + ")";
        
setTimeout(linea60);
    }
    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(id15);
}

function 
recuperaColor(id)    {
    var 
estado document.getElementById(id).getAttribute("cambiandoColor");
    
document.getElementById(id).setAttribute("cambiandoColor""1");
    if (
estado == "0")    transitarColor(id1);

Lo mejor del sistema es que se invoca así:

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

Saludos
  #14 (permalink)  
Antiguo 17/10/2003, 06:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 9 meses
Puntos: 1279
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...

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

Saludos
  #15 (permalink)  
Antiguo 17/10/2003, 06:28
Avatar de epplestun  
Fecha de Ingreso: octubre-2001
Mensajes: 1.621
Antigüedad: 18 años, 2 meses
Puntos: 5
JEJE mola :D jeje funciona bastante bien de momento, nose si lo aplicare al final pero weno .... jeje muxas gracias!!!!
__________________
Usuario registrado de Linux #288725
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:32.