Causing text to change color on mouseover

Hi,
I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way.
Thanks!



//convert RGB values to hexidecimal
function RGBtoHex(color) {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var R = parseInt(digits[2]);
var G = parseInt(digits[3]);
var B = parseInt(digits[4]);
Hex = new Array(R, G, B);
return Hex;
}

// Start the text fading
function FadeStart(id, FadeTo) {
Element = document.getElementById(id);
OriginalColor = getComputedStyle(Element, null).color;
Start = RGBtoHex(FadeTo);
rgb = RGBtoHex(OriginalColor);
red = (Start[0] - rgb[0])/16;
green = (Start[1] - rgb[1])/16;
blue = (Start[2] - rgb[2])/16;
BeginFading = true;
Fade();

}

//Actually do the fading
function Fade() {
var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]);
if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) {
rgb[0] += red;
rgb[1] += green;
rgb[2] += blue;
var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")";
Element.style.color = ChangeColor;
time = setTimeout("Fade()", 500);
}
}

//Return text to original color
function FadeStop() {
BeginFading = false;
clearTimeout(time);
if (Element != null) Element.style.color = OriginalColor;
}

I’d probably use more objects, less globals and DOM-2-Events. though nothing fundamentally different.

PS. don’t use Element as variable name. the global variable Element refers to the DOM Interface named "Element".

Thank you :D

had to try it …
// not complete, but working
function Fade(r, g, b, elem)
{
var color = window.getComputedStyle(elem, null).getPropertyValue("color");
this.origColor = this.toRGB(color);
this.currColor = this.toRGB(color);
this.endColor = {
red: r,
blue: b,
green: g
};
this.diff = {
red: this.endColor.red - this.origColor.red,
green: this.endColor.green - this.origColor.green,
blue: this.endColor.blue - this.origColor.blue
};
this.elem = elem;
this.steps = 32;
this.time = 100; // 100 ms
}
Fade.prototype.toRGB = function (color)
{
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
return {
red: parseInt(digits[2], 10),
green: parseInt(digits[3], 10),
blue: parseInt(digits[4], 10)
};
};
Fade.prototype.applyCSS = function ()
{
this.elem.style.color = "rgb(" + this.currColor.red + ", " + this.currColor.green + ", " + this.currColor.blue + ");";
};
Fade.prototype.nextColor = function ()
{
this.currColor = {
red: Math.round(this.currColor.red + (this.diff.red / this.steps)),
blue: Math.round(this.currColor.blue + (this.diff.blue / this.steps)),
green: Math.round(this.currColor.green + (this.diff.green / this.steps))
};
this.count += 1;
};
Fade.prototype.fade = function ()
{
this.nextColor();
this.applyCSS();
if (this.count == this.steps) {
this.stop();
}
};
Fade.prototype.start = function ()
{
this.count = 0;
this.TID = setInterval(this.fade.bind(this), this.time);
}
Fade.prototype.stop = function ()
{
clearInterval(this.TID);
}
// obviously I don’t care about IE when testing …
var f = new Fade(120, 50, 32, foo);
foo.addEventListener("click", f.start.bind(f), false);