|
Ein Wechsel der Hintergrundfarbe wir heute häufig im Zusammenhang mit barrierefreiem Webdesign angeboten (Farbsehen). Besonders dann, wenn die Textfarbe nicht in Graustufen oder schwarz gehalten ist. Außerdem scheint eine Hitergrundfarbe abhänging von der Tageszeit, den umgebenden Lichtverhältnissen und auch vom Bildschirmtyp mal mehr mal weniger angenehm. Die Frabwerte müssen ja nicht extrem von Weiß nach Pink wechseln sondern könnten in kleinen Abstufungen der Grundfarbe angeboten werden.
Hintergrundfarbe durch DropDown-Auswahl ändern Dieses Beispiel aktiviert eine Farbänderung für die Seiten-Hintergrundfarbe mit einem DropDown-Menü Öffnen sie die Beispieldatei PopUp-Window:  Beispiel anzeigen 
Version B - Formular wird durch Script geschrieben Die eigentliche Funktion ist identisch mit der Version A Farbauswahl in einem Formular Mit dem Pulldownmenü wird bei einer Änderung der Selektion die Hintergrundfarbe neu festgelegt. Ausgelöst durch die JavaScript-Anweisung 'onChange' (bei Änderung) wird der in der Option hinterlegte Farbwert als Wert für die Hintergrundfarbe übergeben. <option value="#0000FF">Blau <option value="#FFE237">Gelb <option value="#B5CE29">GrünUmgesetzt wird die Änderung durch JavaScript mit dieser Anweisung document.bgColor = valueDokument.Hintergrundfarbe = ÜbergebenerWert Für das Dokument gilt: Der Farbwert für die Hintergrundfarbe ist das, was als Wert übergeben wird. Aufwand: entweder:
Das Script im Head: Die Funktion ist im Grunde eine Schreibanweisung. Sie schreibt den HTML-Code für das Formular mit Pulldownmenü in den Body.
<script type="text/javascript" language="JavaScript">
<!--
function schreibeFormular()
{
document.write("<form name=\"Farbwahl\">");
document.write("<select name=\"auswahl\"
onChange=\"document.bgColor = this.options[selectedIndex].value\">");
document.write("<option value=\"#BBBBFF\" selected>Farbauswahl");
document.write("<option value=\"#FFFFFF\">Weiß");
document.write("<option value=\"#0000FF\">Blau");
document.write("<option value=\"#A0A0A0\">Grau");
document.write("<option value=\"#E9E900\">Gelb");
document.write("<option value=\"#A0A0FF\">Lila");
document.write("<option value=\"#C70000\">Rot");
document.write("<option value=\"#804000\">Braun");
document.write("<option value=\"#F0F0FA\">Silber");
document.write("<option value=\"#FF8000\">Orange");
document.write("<option value=\"#D6D6D6\">Grau");
document.write("</select>");
document.write("</form>");
return
}
// End -->
</script>
Die Anweisung ... onChange="document.bgColor=this.options[selectedIndex].value... bedeutet nicht anderes als: Bei einer Änderung (onChange) führe die Anweisung zur Änderung der Hintergrundfarbe mit dem Wert aus der im DropDown-Menü ausgewählt (selected) wurde:  Der Aufruf im Body: Der Aufruf der Funktion führt die Schreibanweisung an der Stelle aus, wo er notiert ist. Innerhalb ihrer Seite erscheint das DropDown-Menü für die Farbwahl an genau der Stelle, wo dieser Code notiert wird: <script type="text/javascript" language="JavaScript"> <!-- schreibeFormular() // End --> </script> Wenn sie den Code für die Funktion in eine externe JavaScript-Datei ausgelagert haben, müssen sie nach Einbindung der externen Datei in ihren Seiten nur noch den Aufruf notieren. Das erspart Arbeit, verringert die Fehlerquote und die Dateien werden kleiner. | ||||||||||||
Home
Hintergrundfarbe ändern 
Sie möchten dem Seitenbesucher die Wahl der Hintergrundfarbe überlassen. Eine platzsparende Auswahl als Pull-Down-Menü bietet diese Option zur Änderung der Hintergrundfarbe. Öffnen sie die Beispieldatei zur Demo
|