 Hintergrundfarbe ändern mit Pulldownmenü - Version B
Eine platzsparende Auswahl als Pull-Down-Menü bietet die Option zur Änderung der Hintergrundfarbe. Öffnen sie die Beispieldatei zur Demo
Version B - Formular wird durch Script geschrieben
In der Version B wird das Formular mit dem Pulldownmenü (engl. dropdown-menü) durch eine JavaScript-Funktion geschieben. Im Body-Bereich der Seite steht lediglich der Aufruf der Funktion. Eine Lösung für eine Mehrfachanwendung innerhalb ihrer Seiten.
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ün
Umgesetzt wird die Änderung durch JavaScript mit dieser Anweisung
document.bgColor = value
(Dokument.Hintergrundfarbe ist ÜbergebenerWert)
Aufwand:
entweder:
- JavaScript im Head notieren
- Im Body der HTML-Seite den Aufruf der Funktion notieren
oder:
- JavaScript in eine externe JavaScript-Datei auslagern
- externe JavaScript-Datei einbinden
- Im Body der HTML-Seite den Aufruf der Funktion notieren
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>
Der Aufruf im Body:
Der Aufruf der Funktion führt die Schreibanweisung an der Stelle aus, wo er notiert ist. Innerhalb ihrer Seite erscheint an genau dieser Stelle das Formular mit dem Pulldownmenü für die Farbwahl.
<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.
| 
WWW.WEB-TOOLBOX.NET
BEISPIEL 
ZURÜCK