Mit jQuery können Stylesheet-Anweisungen dynamisch überschrieben werden, so dass Layout-Anpassungen vom Benutzer der Seite ausgeführt werden können. Diese Anweisungen bleiben allerdings nur bis zum nächsten Seitenaufruf erhalten, da die Stylesheet-Dateien nicht etwa überschrieben werden, sondern die grafischen Attribute den jeweiligen Elementen via jQuery angehängt werden.
1. jQuery in das HTML-Dokument einbinden und checken
In das head-Element der HTML-Datei wird ein neues script-Element eingefügt, in dem auf das jQuery-Framework verlinkt wird.
<script type="text/javascript" src="/scripts/jquery-1.12.3.js"></script>
2. Elemente und css einfügen
3. Selectboxen vorbereiten
4. Variablen für Selectfeld einrichten und ausgeben
5. Wert für Hintergrundfarbe übergeben
6. Hintergrundbilder mit zweitem Selectfeld austauschen
Für beide Selectfelder werden die ersten Optionsfelder mit neutralen Werten ergänzt, so dass die Inhalte der Hintergrundfarbe und des Hintergrundbildes zurückgesetzt werden können.
Anschließend wird der Funktionsblock, mit dem die Hintergrundfarbe ausgetauscht wird, durch copy/paste dupliziert. In dem neuen Funktionsblock werden danach alle erforderlichen Parameter angepasst: Identifier und Variable. Zum Check wird der Wert des Selectfeldes in der Konsole ausgegeben:
$("#select_bild").change(function(e) {
var bild= $(this).val();
console.log(bilderpfad);
});
Für den Bilderpfad muss noch nachgearbeitet werden, da sich die Bilder in einem Unterverzeichnis befinden und dies in den Werten des Optionsfelder nicht berücksichtigt wurde. Mit einer weiteren Variablen wird der Pfad ergänzt und die "feritge" Variable in der css-Methode übergeben.
$("#select_bild").change(function(e) {
var bild= $(this).val();
var bilderpfad="url(images/"+bild+")";
//console.log(bilderpfad);
$("#a_01").css("background-image",bilderpfad);
});
Beispieldateien