Cambio de color progresivo
Hola! Estoy aprendiendo javascript continuamente pero aun soy algo novata y la falta de conocimientos me causa grandes problemas para crear mis propios scripts. Necesito un script que haga que cuando se produzca el evento onmouseover encima de un enlace cambie de color progresivamente a otro color que deseo, y lo mismo con el evento onmouseout, deberá cambiar progresivamente del color al que había cambiado en onmouseover al color original. En fin, yo lo he estado intentando pero me he hundido en el intento y me gustaría que pudiera ayudarme. Lo he intentado con colores en rgb, tal como está en el código solo utilicé la parte del rojo del color en rgb, pero de todas maneras no me funcionaba, y no lo entiendo.
Puede mostrarme el código y explicármelo, ¿por favor? Así será más fácil configurarlo a mi estilo más tarde. MUchísimas gracias!
Aquí le dejo mi intento (se que es un insulto para el javascript, con la de cosas maravillosas que se pueden llegar a hacer con el, pero es lo máximo que puedo hacer :)):
<html>
<head>
<title>Script fade enlace</title>
<style type="text/css">
#enlace {color:rgb(0,0,255)}
</style>
<script language="javascript" type="text/javascript">
var r = 0;
var g = 0;
var b = 255;
var r2 = 51;
var g2 = 153;
var b2 = 204;
function fade1()
{
i=setInterval("fade2()",1);
}
function fade2()
{
if (document.id.enlace.color != rgb(r2,g2,b2) )
{
while(r != r2 )
{
r = r + 1;
document.id.enlace.color == rgb(r,g,b);
}
}
else if (window.i)
{
clearInterval(i)
}
}
</script>
</head>
<body bgcolor="black">
<bR><br><bR><br><bR><br><bR><br><bR><br><bR><br>
<center><a id="enlace" href="javascript:void(null)" onmouseover="fade1()" onmouseout="infade()">Cambia de color
progresivamente</a></center>
</body>
</html>
Puede mostrarme el código y explicármelo, ¿por favor? Así será más fácil configurarlo a mi estilo más tarde. MUchísimas gracias!
Aquí le dejo mi intento (se que es un insulto para el javascript, con la de cosas maravillosas que se pueden llegar a hacer con el, pero es lo máximo que puedo hacer :)):
<html>
<head>
<title>Script fade enlace</title>
<style type="text/css">
#enlace {color:rgb(0,0,255)}
</style>
<script language="javascript" type="text/javascript">
var r = 0;
var g = 0;
var b = 255;
var r2 = 51;
var g2 = 153;
var b2 = 204;
function fade1()
{
i=setInterval("fade2()",1);
}
function fade2()
{
if (document.id.enlace.color != rgb(r2,g2,b2) )
{
while(r != r2 )
{
r = r + 1;
document.id.enlace.color == rgb(r,g,b);
}
}
else if (window.i)
{
clearInterval(i)
}
}
</script>
</head>
<body bgcolor="black">
<bR><br><bR><br><bR><br><bR><br><bR><br><bR><br>
<center><a id="enlace" href="javascript:void(null)" onmouseover="fade1()" onmouseout="infade()">Cambia de color
progresivamente</a></center>
</body>
</html>
1 respuesta
Respuesta de luixn
1
Al fin dimos con la solución,
ponlo después del </head> :D
<script language="Javascript">
// CONFIGURE LO SIGUIENTE
startColor = "#000000"; // MouseOut color
endColor = "#FFC601"; // MouseOver color
stepIn = 15; // tiempo de entrada fade
stepOut = 15; // tiempo de salida fade
/*
Ponga si quiere cambio automatico False
o en modo Fade/Progresivo en True
***/
autoFade = true;
/*
Para saber si tendrá efecto sobre todos los class o no
***/
sloppyClass = true;
// NO MODIFICAR LO SIGUIENTE
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa = 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 = 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++;
}
}
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;
}
</script>
Joder la verdad que es demasiado trabajo para el resultado pero se ve bien :)
Saludos
Luixn
MNS [email protected]
www.mexdesign.com
ponlo después del </head> :D
<script language="Javascript">
// CONFIGURE LO SIGUIENTE
startColor = "#000000"; // MouseOut color
endColor = "#FFC601"; // MouseOver color
stepIn = 15; // tiempo de entrada fade
stepOut = 15; // tiempo de salida fade
/*
Ponga si quiere cambio automatico False
o en modo Fade/Progresivo en True
***/
autoFade = true;
/*
Para saber si tendrá efecto sobre todos los class o no
***/
sloppyClass = true;
// NO MODIFICAR LO SIGUIENTE
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa = 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 = 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++;
}
}
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;
}
</script>
Joder la verdad que es demasiado trabajo para el resultado pero se ve bien :)
Saludos
Luixn
MNS [email protected]
www.mexdesign.com
Hola! Perdón por tardar en contestar, me ha sido imposible hacerlo antes. A ver, en realidad solo he entendido hasta aproximadamente la primera mitad de todo el código que me facilitaste. Por eso muchísimas gracias, ¿pero si no es molestia podrías explicarme aunque tenga que ser brevemente cada array de los creados? También que hacen las funciones dehexice y como funciona la estructura. Se que es una molestia, pero es que estoy estudiando programación y no soy ni siquiera de un nivel intermedio, en javascript, quizá sea porque me limito a copiar y pegar y he decidido que así no se aprende :D Espero que me entiendas. Gracias!
débora
débora
Teniendo en cuenta que no hay una remuneración por nuestro trabajo, unicamente la puntuación de estas respuestas, te agradecería que puntuases la respuesta a tu primera pregunta (la cual considero por bien contestada)y pasar así tus demás dudas a otra pregunta, que con mucho gusto te responderé
