Foros del Web - Ver Mensaje Individual

KarlanKas · #7 (**permalink**) 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>