Script für RGB in #-Code?

[Shura]

Hi,

ich habe gerade eine kleine Fun geschrieben, die Farbe bei MouseOut stufenweise in eine andere umwandelt. Leider funktioniert das Script unter Firefox nicht, weil der mir die Ausgangsfarbe in rgb(x,y,z) wiedergibt. Gibt es eine Möglichkeit die rgb()-Ausgabe direkt in ein #XYZ123-Format umzuwandeln, oder wenigstens die einzelnen rgb()-Werte herauszufiltern?

Danke

[Vinzenz Mai]

Hallo

ich habe gerade eine kleine Fun geschrieben, die Farbe bei MouseOut stufenweise in eine andere umwandelt. Leider funktioniert das Script unter Firefox nicht, weil der mir die Ausgangsfarbe in rgb(x,y,z) wiedergibt. Gibt es eine Möglichkeit die rgb()-Ausgabe direkt in ein #XYZ123-Format umzuwandeln, oder wenigstens die einzelnen rgb()-Werte herauszufiltern?

Du machst etwas falsch, das steht fest. Hättest Du den Quellcode Deiner Funktion gepostet, könnte man vielleicht auch herausfinden, was.

Freundliche Grüße

Vinzenz

[Shura]

Ok. Dachte nur, dass vielleicht wer das Problem kennt. :-)

Code:

var Intervall = 150;

function Fade (EndColor,what) {
  var ColorOld,ColorNew,Hex;
  var R1new,R2new,G1new,G2new,B1new,B2new;
  var R1old,R2old,G1old,G2old,B1old,B2old;
  var R1end,R2end,G1end,G2end,B1end,B2end;

ColorOld = what.style.background;

if(ColorOld.substr(0,1) != "#")
  {what.style.background=EndColor;return;}

//  alert("CO: "+ColorOld+", what:"+what.id+"");
  if(ColorOld == EndColor) return;

Hex = "#";

R1end = EndColor.substr(1,1);
  R2end = EndColor.substr(2,1);
  G1end = EndColor.substr(3,1);
  G2end = EndColor.substr(4,1);
  B1end = EndColor.substr(5,1);
  B2end = EndColor.substr(6,1);

R1old = ColorOld.substr(1,1);
  R2old = ColorOld.substr(2,1);
  G1old = ColorOld.substr(3,1);
  G2old = ColorOld.substr(4,1);
  B1old = ColorOld.substr(5,1);
  B2old = ColorOld.substr(6,1);

R1new = FadeOne(R1old,R1end);
  R2new = FadeOne(R2old,R2end);
  G1new = FadeOne(G1old,G1end);
  G2new = FadeOne(G2old,G2end);
  B1new = FadeOne(B1old,B1end);
  B2new = FadeOne(B2old,B2end);

ColorNew = Hex+R1new+R2new+G1new+G2new+B1new+B2new;
  what.style.background=ColorNew;
// alert("CN: "+ColorNew+";CO: "+ColorOld+";EC: "+EndColor+"");
  window.setTimeout("Fade('"+EndColor+"',"+what.id+")",Intervall);

return;
}

function FadeOne (old,end)
{
  if(old == end) return end;
  if(end == "f") end = "15";
  if(end == "e") end = "14";
  if(end == "d") end = "13";
  if(end == "c") end = "12";
  if(end == "b") end = "11";
  if(end == "a") end = "10";

if(old == "f") old = "15";
  if(old == "e") old = "14";
  if(old == "d") old = "13";
  if(old == "c") old = "12";
  if(old == "b") old = "11";
  if(old == "a") old = "10";

//alert(""+old-end+",old: "+old+", end: "+end+"")
  if(old - end < 0) { old++; }
  else { old--; }

if(old == "15") old = "f";
  if(old == "14") old = "e";
  if(old == "13") old = "d";
  if(old == "12") old = "c";
  if(old == "11") old = "b";
  if(old == "10") old = "a";

return old;
}

Hallo

ich habe gerade eine kleine Fun geschrieben, die Farbe bei MouseOut stufenweise in eine andere umwandelt. Leider funktioniert das Script unter Firefox nicht, weil der mir die Ausgangsfarbe in rgb(x,y,z) wiedergibt. Gibt es eine Möglichkeit die rgb()-Ausgabe direkt in ein #XYZ123-Format umzuwandeln, oder wenigstens die einzelnen rgb()-Werte herauszufiltern?

Du machst etwas falsch, das steht fest. Hättest Du den Quellcode Deiner Funktion gepostet, könnte man vielleicht auch herausfinden, was.

Freundliche Grüße

Vinzenz

[EKKi]

Mahlzeit,

zuerst einmal auch an Dich der Hinweis, dass TOFU unschön und nicht erwünscht ist.

Ok. Dachte nur, dass vielleicht wer das Problem kennt. :-)

Klar. Alle, die ne Glaskugel neben dem Monitor stehen haben ... ;-)

Ich weiß nicht, ob es was mit Deinem Problem zu tun hat, aber folgendes scheint mir irgendwie merkwürdig:

function Fade (EndColor,what) {

[...]

ColorOld = what.style.background;

Ich vermute, dass sich in der Variablen "what" ein Objekt befindet? Das Objekt, dessen Hintergrundfarbe Du ändern willst?

window.setTimeout("Fade('"+EndColor+"',"+what.id+")",Intervall);

Wieso ruft sich dann hier per Timeout die Funktion selbst mit der ID des Objekts (und das noch nicht einmal als String) auf?

Falls Dir nicht klar ist, was ich meine, versuch zu verstehen, dass dieser Aufruf von "setTimeout" eigentlich macht:

Nach Ablauf eines bestimmten Intervalls wird folgender Funktionsaufruf ausgeführt (unter der Annahme, dass die Variable "EndColor" den Wert "#ffcc00" enthält und das in der Variablen "what" gespeicherte Objekt eine Eigenschaft "ID" mit dem Wert "foobar" besitzt):

Fade('#ffcc00',foobar)

Ich denke nicht, dass Du das willst.

Du solltest Deine Funktion "Fade()" dahingehend ändern, dass sie als zweiten Parameter kein Objekt, sondern dessen ID (als String!) erwartet.

MfG,
EKKi

[Shura]

Mahlzeit,

zuerst einmal auch an Dich der Hinweis, dass TOFU unschön und nicht erwünscht ist.

Ok. Dachte nur, dass vielleicht wer das Problem kennt. :-)

Klar. Alle, die ne Glaskugel neben dem Monitor stehen haben ... ;-)

Ok. Seh ich ein. :-)

Ich weiß nicht, ob es was mit Deinem Problem zu tun hat, aber folgendes scheint mir irgendwie merkwürdig:

function Fade (EndColor,what) {
[...]
  ColorOld = what.style.background;

Ich vermute, dass sich in der Variablen "what" ein Objekt befindet? Das Objekt, dessen Hintergrundfarbe Du ändern willst?

window.setTimeout("Fade('"+EndColor+"',"+what.id+")",Intervall);

Wieso ruft sich dann hier per Timeout die Funktion selbst mit der ID des Objekts (und das noch nicht einmal als String) auf?

Die Funktion ruft sich selbst auf, weil sich die Farbe alle "Intervall" ändern soll. Der Effekt ist, dass die Farbe langsam verblasst und nicht
einfach ausgeht.

Falls Dir nicht klar ist, was ich meine, versuch zu verstehen, dass dieser Aufruf von "setTimeout" eigentlich macht:

Nach Ablauf eines bestimmten Intervalls wird folgender Funktionsaufruf ausgeführt (unter der Annahme, dass die Variable "EndColor" den Wert "#ffcc00" enthält und das in der Variablen "what" gespeicherte Objekt eine Eigenschaft "ID" mit dem Wert "foobar" besitzt):

Fade('#ffcc00',foobar)

Ich denke nicht, dass Du das willst.

Doch, genau das will ich. Erkärung weiter oben.

Du solltest Deine Funktion "Fade()" dahingehend ändern, dass sie als zweiten Parameter kein Objekt, sondern dessen ID (als String!) erwartet.

Erledigt, danke für den Tipp.

MfG,
EKKi

[EKKi]

Mahlzeit,

Wieso ruft sich dann hier per Timeout die Funktion selbst mit der ID des Objekts (und das noch nicht einmal als String) auf?

Die Funktion ruft sich selbst auf, weil sich die Farbe alle "Intervall" ändern soll. Der Effekt ist, dass die Farbe langsam verblasst und nicht
einfach ausgeht.

Das war mir klar - mir ging es um den zweiten Teil meiner Frage ... um das "Wie" des Aufrufs.

Fade('#ffcc00',foobar)

Ich denke nicht, dass Du das willst.

Doch, genau das will ich. Erkärung weiter oben.

Nein, das willst Du nicht. Schlicht und ergreifend, weil es - wie ich beschrieben habe - nicht funktioniert. Was Du möchtest ist dass folgender Code ausgeführt wird:

Fade('#ffcc00','foobar')

(dazu müsstest Du dann eben nur noch den Funktionskopf und den Anfang der Funktion dahingehend ändern, dass nicht das Objekt selbst, sondern dessen ID als String als zweiter Parameter erwartet wird)

Du solltest Deine Funktion "Fade()" dahingehend ändern, dass sie als zweiten Parameter kein Objekt, sondern dessen ID (als String!) erwartet.

Erledigt, danke für den Tipp.

Na also, geht doch. :-) Funktioniert der Rest denn jetzt auch?

MfG,
EKKi

[Christian S.]

Hi,

Das "Problem" ist mir bekannt. FF liefert den Farbwert in "rgb(255, 255, 255)", IE in "#FFFFFF". Zumindest wenn ich getComputedStyle verwende.

Ich bin so vorgegangen, dass ich die Farbwerte irgendwie mit String funktionen rausgeparst habe, oder erst das "rgb(" wegegeschnitten habe, und dann das letzte Zeichen ")". Und dann eine split(",") funktion angewendet habe. Dann auf jedes Element ein parseInt.

Den Farbewert in Hex umrechnen, kannst du ziemlich einfach mit (255).toString(16). => "ff"

Dann musst du noch auf .length == 1 prüfen und eine "0" davor tun. Dann noch das "#" und du hast den hexcode.

Gruß!

[Shura]

Hi,

Das "Problem" ist mir bekannt. FF liefert den Farbwert in "rgb(255, 255, 255)", IE in "#FFFFFF". Zumindest wenn ich getComputedStyle verwende.

Ich bin so vorgegangen, dass ich die Farbwerte irgendwie mit String funktionen rausgeparst habe, oder erst das "rgb(" wegegeschnitten habe, und dann das letzte Zeichen ")". Und dann eine split(",") funktion angewendet habe. Dann auf jedes Element ein parseInt.

Den Farbewert in Hex umrechnen, kannst du ziemlich einfach mit (255).toString(16). => "ff"

Dann musst du noch auf .length == 1 prüfen und eine "0" davor tun. Dann noch das "#" und du hast den hexcode.

Gruß!

Danke werde mal versuchen, das umzusetzen. (Schaffen die es irgendwann mal sich zu einigen?¿?)

[Vinzenz Mai]

Hallo

[code lang=javascript]

function Fade (EndColor,what) {
  ColorOld = what.style.background;

// Hier solltest Du als Debug-Ausgabe prüfen, welchen Inhalt ColorOld hat,
// siehe </archiv/2008/1/t164920/#m1075454>
// Firefox liefert mir hier bei Verwendung des style-Attributes eine
// Zeichenkette der Form RGB(x, y, z) zurück, so dass

if(ColorOld.substr(0,1) != "#")

// dies hier fehlschlägt.

{what.style.background=EndColor;return;}

// [...]

R1end = EndColor.substr(1,1);
  R2end = EndColor.substr(2,1);
  G1end = EndColor.substr(3,1);
  G2end = EndColor.substr(4,1);
  B1end = EndColor.substr(5,1);
  B2end = EndColor.substr(6,1);

// Es gibt Arrays :-)

ColorNew = Hex+R1new+R2new+G1new+G2new+B1new+B2new;
  what.style.background=ColorNew;

// Diese Zuweisung wird von Firefox umgesetzt
// ich empfehle Dir allerdings, anstatt .background .backgroundColor
// zu setzen, da Du ja nur die Hintergrundfarbe setzen willst.
[...]

}

Behandle den Inhalt von .background korrekt, d.h. schau' nach, was Dir die Browser zurückliefern. Rechne mit unterschiedlichen Angaben, die das gleiche bewirken.

Freundliche Grüße

Vinzenz

[Shura]

Hallo

[code lang=javascript]

function Fade (EndColor,what) {
  ColorOld = what.style.background;
// Hier solltest Du als Debug-Ausgabe prüfen, welchen Inhalt ColorOld hat,
// siehe </archiv/2008/1/t164920/#m1075454>
// Firefox liefert mir hier bei Verwendung des style-Attributes eine
// Zeichenkette der Form RGB(x, y, z) zurück, so dass

if(ColorOld.substr(0,1) != "#")
// dies hier fehlschlägt.

{what.style.background=EndColor;return;}

// [...]

R1end = EndColor.substr(1,1);
  R2end = EndColor.substr(2,1);
  G1end = EndColor.substr(3,1);
  G2end = EndColor.substr(4,1);
  B1end = EndColor.substr(5,1);
  B2end = EndColor.substr(6,1);

// Es gibt Arrays :-)

ColorNew = Hex+R1new+R2new+G1new+G2new+B1new+B2new;
  what.style.background=ColorNew;

// Diese Zuweisung wird von Firefox umgesetzt
// ich empfehle Dir allerdings, anstatt .background .backgroundColor
// zu setzen, da Du ja nur die Hintergrundfarbe setzen willst.
[...]

}

Behandle den Inhalt von .background korrekt, d.h. schau' nach, was Dir die Browser zurückliefern. Rechne mit unterschiedlichen Angaben, die das gleiche bewirken.

Freundliche Grüße

Vinzenz

Danke. Hab das per alert() ausgeben lassen. Da hab ich das mit dem rgb() ja auch gesehen. Werde mal die Version von Christian versuchen.
Dachte nur, ich hätte eine einfache Fun übersehen, die das Problem einfacher löst. (Ja, die Henne dachte auch, dass sie badet bis das Wasser angefangen hat zu kochen.)

[ChrisB]

Hi,

Dachte nur, ich hätte eine einfache Fun übersehen,

Von welchen Spaessen redest du eigentlich die ganze Zeit?

(Ja, die Henne dachte auch, dass sie badet bis das Wasser angefangen hat zu kochen.)

(Angesichts deines Schreibstils warst du vermutlich die Henne? "Als Kind zu heiss ...")

MfG ChrisB

[Cybaer]

Hi,

Gibt es eine Möglichkeit die rgb()-Ausgabe direkt in ein #XYZ123-Format umzuwandeln, oder wenigstens die einzelnen rgb()-Werte herauszufiltern?

Bis auf Zahlen und Kommata alles wegschmeißen (replace()), Zahlen aufsplitten (split()) in Hex-Werte umwandeln (parseInt()), ggf. 'ne 0 vorsetzen und natürlich das "#" an den Anfang fertig.

Gruß, Cybaer

[suit]

Hi,

ich habe gerade eine kleine Fun geschrieben, die Farbe bei MouseOut stufenweise in eine andere umwandelt. Leider funktioniert das Script unter Firefox nicht, weil der mir die Ausgangsfarbe in rgb(x,y,z) wiedergibt. Gibt es eine Möglichkeit die rgb()-Ausgabe direkt in ein #XYZ123-Format umzuwandeln, oder wenigstens die einzelnen rgb()-Werte herauszufiltern?

http://de.wikipedia.org/wiki/Hexadezimalsystem hier steht schön beschrieben, wie man hexadezimal in dezimal umrechnet und umgekehrt, wenn du das ganze zu fuss machen willst, kannst du dir hiermit eine funktion bauen

ansonsten, die elegantere lösung ist natürlich die von Vinzenz Mai

[Vinzenz Mai]

Hallo suit,

ansonsten, die elegantere lösung ist natürlich die von Vinzenz Mai

danke für die Blumen, aber ich glaube Du meintest Cybaer. Ich kann mich nicht daran erinnern, eine konkrete Lösung vorgeschlagen zu haben.

Freundliche Grüße

Vinzenz

[suit]

danke für die Blumen, aber ich glaube Du meintest Cybaer. Ich kann mich nicht daran erinnern, eine konkrete Lösung vorgeschlagen zu haben.

in der tat, aber du kannst die blumen auch behalten :D

[Shura]

Hi,

ich habe gerade eine kleine Fun geschrieben, die Farbe bei MouseOut stufenweise in eine andere umwandelt. Leider funktioniert das Script unter Firefox nicht, weil der mir die Ausgangsfarbe in rgb(x,y,z) wiedergibt. Gibt es eine Möglichkeit die rgb()-Ausgabe direkt in ein #XYZ123-Format umzuwandeln, oder wenigstens die einzelnen rgb()-Werte herauszufiltern?

Danke

Selbstreply, weil es an alle gehen soll.
Vielen Dank. Habt mir sehr geholfen. Die Chose funktioniert jetzt auch unter FireFox.

Liebe Grüße,

Shura