mit javascript eine seite komplett einfärben

[Waldfürus]

Hallo,

ich bin mit javascript sehr sehr unbedarft.
vielleicht kennt jemand für mich ein passendes script, oder kann überblicken ob mein vorhaben überhaupt machbar ist.

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. Dies könnte entlang eines bestimmten farbspektrums passieren (z.b. regenbogen)

also überall wo es grau/schwarz ist soll es die gleiche farbe haben. diese farbe aber soll sich dann langsam verschieben. bsp. regenbogen

ware fantastisch wenn mir jemand weiterhelfen könnte.

LG

Waldfürst

[jobo]

Hallo,

gifs kannst du nicht ändern. die hintergrundfarbe schon, indem du auf die style-Eigenschaft zugreifst.

Gruß

jobo

[Gernot Back]

Hallo Waldfürus,

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. Dies könnte entlang eines bestimmten farbspektrums passieren (z.b. regenbogen)

Du könntest quasi eine teiltransparente Folie über deine gesamte Webseite legen, indem du ein DIV-Element mit entsprechenden Ausmaßen, Hintergrundfarbe und Opazititätswert über diese legst. Die Hintergrundfarbe dieses Folienlayers könntest du in bestimmten Zeitintervallen auch entlang des Spektrums des Regenbogens laufen lassen. Frag mich aber nicht nach dem Algorithmus, wie du das in Hexadezimalwerten berechnest!

Das ganze hätte natürlich zur Folge, dass alle unter dem Folienlayer  befindlichen Elemente nicht mehr markier- oder klickbar wären, aber bei einem künstlerischen Projekt wie deinem ist das vielleicht vertretbar.

Gruß Gernot

[Matthias Apsel]

Om nah hoo pez nyeetz, Waldfürus!

Du könntest quasi eine teiltransparente Folie über deine gesamte Webseite legen, indem du ein DIV-Element mit entsprechenden Ausmaßen, Hintergrundfarbe und Opazititätswert über diese legst. Die Hintergrundfarbe dieses Folienlayers könntest du in bestimmten Zeitintervallen auch entlang des Spektrums des Regenbogens laufen lassen. Frag mich aber nicht nach dem Algorithmus, wie du das in Hexadezimalwerten berechnest!

Ergänzung: Das würde auch nur für die Bereiche funktionieren, die die Farben wechseln sollen, was den Vorteil hätte, dass man Links wieder klicken kann.

Möglichkeit 2: verwende animated gifs.

Möglichkeit 3: wenn es sich um Hintergrundgrafiken handelt, könnte man den Hintergrund via CSS-Sprites verschieben.

Matthias

[Tante Trude]

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.

[Matti Mäkitalo]

Hi,

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. Dies könnte entlang eines bestimmten farbspektrums passieren (z.b. regenbogen)

also überall wo es grau/schwarz ist soll es die gleiche farbe haben. diese farbe aber soll sich dann langsam verschieben. bsp. regenbogen

Ich würde dir vorschlagen, deine Grafik als SVG zu entwickeln und dann mit Javascript das Design des SVG anzupassen.

Bis die Tage,
Matti