✔ Farbübergang

[ZodiacXP]

Da binnich wieder mit ner neuen Aufgabe

Ich habe ein Objekt ... sagen wir einfach mal <tr bgcolor="#C0C0C0"> und möchte die Farbe davon auf eine andere Übergehen lassen z.B. "#ABCDEF"

Mittlerweile habe ich schon ein MouseOver das die Farbe sofort ändert, aber der MouseOut soll einen Übergang haben.

Wie realisiere ich das mit JavaScript?


Hier noch mein rowOver (mouseOver):

function rowOver(theRow, newColor) {

	var i = 0;

	if (!theRow.id) {
		for(i=0;i<document.getElementsByTagName('tr').length;++i) {
			aktRow = document.getElementsByTagName('tr')[i];
			if (aktRow.id == "") { aktRow.id='row_'+i; }
			
		}
	}

	document.getElementById(theRow.id).style.backgroundColor= '#'+newColor;
}

 

[ZodiacXP]

Gut. Jetzt habe ich noch hinzugenommen:

function rowOut(theRow, newColor) {
	var speed = 100;

	alert("nochma");

	var c = 0;
	var stp_r = 0;
	var stp_g = 0;
	var stp_b = 0;

	if (rowOut.arguments.length > 2) {
		var c = rowOut.arguments[2];
		var stp_r = rowOut.arguments[3];
		var stp_g = rowOut.arguments[4];
		var stp_b = rowOut.arguments[5];
	}

	var aktRow = document.getElementById(theRow.id);
	var aktColor = aktRow.style.backgroundColor;

	var r = parseInt(aktColor.substr(1,2),16);
	var g = parseInt(aktColor.substr(3,2),16);
	var b = parseInt(aktColor.substr(5,2),16);

	if (stp_r == 0 && stp_g == 0 && stp_b == 0) {
		var ziel_r = parseInt(newColor.substr(0,2),16);
		var ziel_g = parseInt(newColor.substr(2,2),16);
		var ziel_b = parseInt(newColor.substr(4,2),16);
		
		stp_r = (ziel_r - r) / 100;
		stp_g = (ziel_g - g) / 100;
		stp_b = (ziel_b - b) / 100;
	}

	var neu_r = parseBase(Math.round(r + (stp_r * c)),16);
	var neu_g = parseBase(Math.round(g + (stp_g * c)),16);
	var neu_b = parseBase(Math.round(b + (stp_b * c)),16);

	if (neu_r == 0) neu_r = "00";
	if (neu_g == 0) neu_g = "00";
	if (neu_b == 0) neu_b = "00";

	putColor = neu_r + neu_g + neu_b;

	aktRow.style.backgroundColor = '#'+putColor;

	c = c + 1;
	speed = 1000 / speed;

	if (c < 100) window.setTimeout("rowOut("+theRow+", '"+newColor+"', "+c+", "+stp_r+", "+stp_g+", "+stp_b+")", speed);
}

und zum umwandeln von Integer in ein Hex-Wert:

function parseBase(num, base) {
    var converted = "";
	var digits = "0123456789ABCDEF";
	k = num + "";

    k = Math.abs(k);

    var j = 0;
    var i = 0;
    while(k>=Math.pow(base,(i+1))) i++;
        while(k>0){
            while (k>=((j+1)*Math.pow(base,i))) j++;

            k = k - (j)*Math.pow(base,i);
            converted = converted + digits.charAt(j);
            i--;
            j = 0;
        }
    for(j=i;j>=0;j--) converted = converted + "0";

    return converted;
}

Das parseBase() klappt wunderbar. Nur der Übergang in rowOut will noch nicht so ganz.