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(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
