Hintergrundfarbe per Eingabe |
Auf dieser Seite stelle ich Schritt für Schritt ein paar Möglichkeiten
vor, wie man mit Textfeldern und Buttons in Formularen die Hintergrundfarbe
ändert. Ich habe hier im Großen und Ganzen auf Erklärungen verzichtet,
da alle Themen zuvor abgehandelt wurden. Zu jedem Beispiel habe ich den Javascript
Quelltext nochmal extra beigefügt. Die Funktionen, zwischen den Script
Tags aus dem Head Bereich erscheinen jeweils oberhalb des Formulars. Der Quelltext
des Formulars steht darunter.
Die Hintergrundfarbe wird in Javascript mit folgendem Befehl geändert:
document.bgColor="00ff00";
Die Angabe erfolgt in Hexadezimal Werten, allerdings ohne das Gatterzeichen
(#).
Der Wert muß in jedem Fall in Anführungszeichen stehen. In einigen
Beispielen tut er das nicht, weil es sich um Zeichenketten handelt, die dynamisch
konstruiert werden oder aus Textfeldern stammen.
Der Eingabewert eines Textfeldes namens meintextfeld aus dem Formular namens
meinformular kann folgendermaßen zugewiesen werden:
document.meinformular.meintextfeld.value
Buttonklick ändert die Farbe, dann erscheint sie im Textfeld als Hexadezimalwert.
<form name="form1">
<input type="text" name="bgfarbe" size="10">
<input type="button" value="Farbe beige" onClick="farbegreen()">
</form>
function eingabefarbe() {
document.bgColor=document.form2.farbfeld.value;
document.form1.bgfarbe.value=document.bgColor;
}
Gebe hier einen Hexadezimalwert für die Hintergrundfarbe ein, z.B.: C0FFEE
BACAD1 CACCA0 5AEFDE
<form name="form2">
<input type="text" name="farbfeld" size="10">
<input type="button" value="Hexwert eingeben" onClick="eingabefarbe()">
</form>
function graustufen() {
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var x1 = 0, x2 = 0;
for(i = 0; i < document.form3.graufeld.value; i++){
document.bgColor = X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
status=i;
x2 = x2 + 1;
if(x2 % 16 == 0) {
x2 = 0;
x1 = x1 + 1;
}
}
}
Gebe hier eine Graustufe von 1 bis 255 ein.
<form name="form3">
<input type="text" name="graufeld" size="5">
<input type="button" value="Graustufe eingeben" onClick="graustufen()">
</form>
Erklärung:
Ich gehe davon aus, dass Farbangaben in Html mittels Hexadezimalwert Grundwissen
ist, ansonsten siehe selfhtml
Das Beispiel blendet die Hintergrundfarbe von Schwarz über Graustufen nach
Weiß ein. Dazu wird ein Array X definiert, in dem die Hexadezimalziffern
0 bis 9 und A bis F gespeichert werden. In einer for-Schleife wird von 0 bis
höchstens 255 gezählt. Der Grund ist, daß 255 der maximale Wert
(dezimal gesehen) eines RGB-Farbwerts sein kann. Innerhalb der Schleife wird
der Eigenschaft document.bgColor jeweils ein neuer Wert zugewiesen. Dabei wird
aus den zuvor definierten Ziffern das Arrays X eine gültige Farbangabe
konstruiert.
Die For Schleife
for(i = 0; i < document.form3.graufeld.value; ++i){Anweisungen}
Bei jedem Schleifendurchlauf wird zu i eine 1 hinzuaddiert i++ man könnte
auch schreiben i=i+1
Die Schleife beginnt bei 0, i=0 und endet bei dem eingegebenen Wert i<document.form3.graufeld.value
status=i zeigt bei jedem Schleifendurchlauf die Werte von i in der Statuszeile
an. Das ist nicht unbedingt erforderlich.
x2=x2+1 Bei jedem Schleifendurchlauf wird der Wert der Variablen x2 um 1 erhöht.
Das würde bedeuten, das x2 am Ende den eingebenen Wert erreicht hätte.
i<werteingabe
Allerdings folgt nun eine if Bedingung, denn wenn x2 durch 16 teilbar ist (siehe
Modulo) , wird ihr Wert auf 0 gesetzt x2=0
und der Variablen x1, die bei 0 beginnt, wird eine 1 hinzuaddiert x1=x1+1
Das bedeutet, sobald die if Bedingung der erste mal erfüllt ist, also bei
Wert 16, ist: x1=1 und x2=0
Die dezimale Zahl 16 entspricht der hexadezimalen Zahl 10.
x1 und x2 wird die erste und zweite Stelle der Hexadezimalzahl zugewiesen und
zwar mittels des zuvor erzeugten Arrays, namens groß
X
Daher würde bei 32 (wenn die if Bedingung das zweite mal erfüllt ist)
die entsprechende Zahl 20 hexadezimal erzeugt. x1=2 und x2=0
Mittels document.bgColor wird die Hintergrundfarbe erzeugt.
x1 und x2 erzeugen jeweils die beiden Stellen der Farben rot grün blau
und zwar wird die Hexadezimal Angabe aus dem Array mittels der Zahlenwerte aus
den Variablen x1 und x2 zugewiesen.
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
Da bei Grauwerten alle drei Werte gleich sind lautet die Zuweisung
X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2]
Wer es noch nicht kapiert hat kann ja mal ein paar Zahlen durchspielen. z.B.
Zahl 60 Die if Bedingung wurde dreimal erfüllt bei 16 bei 32 und 48
dadurch ist x1=3
Die Zahl 3 als dezimal Wert und ihr Hexwertzeichen ist das selbe.
x2 wurde bei 48 auf 0 gesetzt und steht nun auf 12
Also wird bei x2 der Hexwert c übergeben.
dezimal 60 entspricht hex 3c
Die nächste Formel funktioniert nach dem gleichen Prinzip, nur dass wir
hier für alle 3 Farben verschiedenen Schleifen erzeugen.
Außerdem wird der Befehl document.bgColor hinter die Prozedur gesetzt,
dadurch ändert sich die Hintergrundfarbe erst wenn die Schleifen durchlaufen
sind.
function rgbfarben() {
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var r1 = 0, r2 = 0, g1 = 0, g2 = 0, b1 = 0, b2 = 0;
for(r = 0; r < document.form4.rfeld.value; r++){
r2 = r2 + 1;
if(r2 % 16 == 0) {
r2 = 0;
r1 = r1 + 1;
}
}
for(g = 0; g < document.form4.gfeld.value; g++){
g2 = g2 + 1;
if(g2 % 16 == 0) {
g2 = 0;
g1 = g1 + 1;
}
}
for(b = 0; b < document.form4.bfeld.value; b++){
b2 = b2 + 1;
if(b2 % 16 == 0) {
b2 = 0;
b1 = b1 + 1;
}
}
document.bgColor = X[r1] + X[r2] + X[g1] + X[g2] + X[b1] + X[b2];
}
Gebe hier in die Farbfelder jeweils RGB-Werte von 0 bis 255 ein.
<form name="form4">
<input type="text" name="rfeld" size="5">
<input type="text" name="gfeld" size="5">
<input type="text" name="bfeld" size="5">
<input type="button" value="RGB eingeben" onClick="rgbfarben()">
</form>
es folgt ein Linkmenue mit einer Formular Auswahlliste