Tante Trude: mit javascript eine seite komplett einfärben

Beitrag lesen

Hallo,

ich habe eine ganz kleine html/css seite mit schwarzem text und graustufen gifs.
ich möchte, dass statt schwarz eine andere farbe angezeigt wird und dass sich diese farbe ganz langsam ändert.

du kannst mit setInterval() eine Funktion in regelmäßigen Abständen aufrufen lassen. Diese (deine) Funktion setzt den betreffenden CSS-Wert (color oder background-color) jeweils einen Schritt weiter. Das ist eigentlich recht simpel: Du hast drei Variablen, rot, grün, blau, und lässt alle nacheinander von 0 bis 255 durchlaufen. Im HSV-Farbschema brauchst du sogar nur einen Wert, den Farbton (H) durchlaufen lassen, musst den HSV-Wert dann aber in RGB umrechnen, wenn du nicht nur die aktuellsten Browser unetrstützen willst (dafür gibt es sicher irgendwo eine fertige Funktion).

Welche Elemente du änderst, bestimmst du anhand der CSS-Klasse bzw. generell über CSS-Selektoren. Sind's nur einige Elemente, weisst du ihnen eine Klasse zu (<p class="blafasel farbwechsel">). Sind's viele, nimmst du allgemeinere Selektoren.

Für den Zugriff über CSS-Selektoren solltest du aber unbedingt auf eine Javascript-Bibliothek zurückgreifen (JQuery, Mootools, Sizzle, etc.).
Das Setzen der Farbe bei allen Elementen der Klasse farbwechsel wäre nur eine Zeile:

$("#farbwechsel").style.color = "rgb(" + r + "," + g + "," + b + ")";

Die genaue Syntax hängt von der verwendeten Bibliothek ab.

also überall wo es grau/schwarz ist soll es die gleiche farbe haben.

Meinst du den gleichen Farbton, aber mit der Helligkeit des Elements, also schwarz wäre zum Beispiel knallrot, grau wäre nur blassrot, weiß dementsprechend gar nicht mehr rot? Das wäre aufwendiger.

Bilder kannst du davon abgesehen im Grunde gar nicht ändern. Die einzige Möglichkeit in dieser Richtung wäre wohl, graue PNG-Bilder mit Alphakanal zu nehmen, d.h. Grafiken, die halbtransparent sein können, und die Farbe hinter dem <img>-Element zu ändern.