Grafik wechseln
- Wechsel von Hintergründen mit jQuery
- Grafik wechseln
Die Hintergrund-Templates Jeder Hintergrund kommt mit einer eigenen CSS-Datei. Diese finden Sie im Verzeichnis des jeweiligen Templates. Die Zuweisung des Templates erfolgt nach dem Anklicken des farbigen Images mithilfe von JavaScript. Als Platzhalter haben Sie den generischen Link mit der ID ak...
Die Hintergrund-Templates
Jeder Hintergrund kommt mit einer eigenen CSS-Datei. Diese finden Sie im Verzeichnis des jeweiligen Templates. Die Zuweisung des Templates erfolgt nach dem Anklicken des farbigen Images mithilfe von JavaScript. Als Platzhalter haben Sie den generischen Link mit der ID aktiver-hg.Die Minimalausprägung der Datei weist dem Hintergrund das neue Layout zu. Natürlich können Sie jedem Hintergrund noch eine weitere individuelle Note verleihen.
body {
background: #0000FF url(bg.gif)
repeat-x 0 top;
}Im Beispiel wird dem Hintergrund ein Blauton zugewiesen - dies ist der Grundton des Hintergrunds. Mithilfe einer Grafik, die Sie über eine URL aufrufen, können Sie die Seite etwa noch mit einem Farbverlauf versehen. Mithilfe von repeat-x wird der Hintergrund so lange innerhalb einer Zeile wiederholt, bis das Ende der Zeile erreicht ist. Die beiden letzten Angaben 0 und top legen die linke obere Ecke der Hintergrundgrafik fest. Im Beispiel wird die erste Grafik also bei der Position x=0 und der y-Position top dargestellt. top steht dabei für vertikal obenbündig - die Grafik wird also in der linken oberen Ecke des Browsers zum ersten Mal dargestellt.
Grafik wechseln
Die restliche Funktionalität verbirgt sich in der JavaScript-Datei. Diese sorgt sowohl für den Wechsel des Themes als auch für die Speicherung des Cookies. Wie bereits erwähnt, wird die aktuell ausgewählte Farbe des Hintergrunds in einem Cookie gespeichert. Dies ist dann notwendig, wenn Sie die gewählte Hintergrundfarbe zu einer weiteren Webseite mitnehmen möchten. Damit wird die Abfrage der gewählten Hintergrundfarbe ein integraler Bestandteil beim Seitenaufbau. Das jQuery Plugin Cookie übernimmt einen Großteil der Verwaltung, Sie müssen lediglich die Parameter dafür übergeben.
var cookie_name = "wahl_hg";
var cookie_optionen = { path: "/",
expires: 7 };Unser Cookie erhält den Namen wahl_hg, wird direkt im Verzeichnis des Browsers für temporäre Dateien gespeichert und nach sieben Tagen läuft die Gültigkeit ab.
Ist schon ein Cookie da?
Für den Aufruf wird das Ereignis $(document).ready verwendet, das dank des Einsatzes von jQuery direkt beim Laden der Website ausgelöst wird. Die Funktion versucht zuerst, das Cookie wahl:hg zu laden und weist diesem die Variable lese_cookie zu.
var lese_cookie = $.cookie(cookie_
name);
if(lese_cookie != null) {
$("#aktiver-hg").attr({ href: "hg/"
+ lese_cookie + "/hg.css"});
}Als Nächstes wird überprüft, ob das Cookie auch einen Inhalt hat - dies ist so, wenn bereits einmal eine Auswahl des gewünschten Hintergrunds stattgefunden hat. In diesem Fall weisen Sie dem generischen Hintergrund die im Cookie gespeicherte Auswahl zu. Dazu wird der Variablen aktiver-hg der Link auf das gewünschte Theme zugewiesen. Der Name des Themes ist im Cookie gespeichert und kann mit der lese_cookie Variablen ausgelesen werden.Der String für die URL lautet dann etwa hg/hg01/theme.css und verweist auf die CSS-Datei des Themes.
Auswahl und Speicherung
Als Nächstes müssen Sie noch das Click-Ereignis abfangen, einen neuen Hintergrund laden und die Auswahl im Cookie speichern. Das Ereignis wird ausgelöst, wenn Sie auf eines der Vorschaubilder klicken. Dieses Event wird mithilfe der Abfrage $("#hg-frame a").click() abgefangen.Innerhalb der Funktion ermitteln Sie als Erstes den Namen des Hintergrunds. Dieser ist im Attribut rel des Links abgelegt und wird der Variablen hgname zugewiesen.Durch den Klick soll auch ein Wechsel des aktuellen Hintergrunds ausgelöst werden. Zum Schluss erzeugen Sie noch ein Cookie mit dem Namen wahl_hg, dem Namen des Hintergrunds als Inhalt und weisen diesem die Gültigkeit von sieben Tagen zu.
$("#hg-frame a").click(function() {
var hgname = $(this).attr("rel");
$("#aktiver-hg").attr({ href: "hg/"
+ hgname + "/hg.css"});
$.cookie(cookie_name, hgname,
cookie_optionen);
return false;
});
Erweiterungsmöglichkeiten
Dieses Skript können Sie beliebig erweitern, vor allem hinsichtlich der Auswahl der zur Verfügung stehenden Hintergrundbilder und -farben. Hier bietet sich etwa das jQuery Plugin infinite-carousel() an, das die Vorschaubilder als Band anordnet, durch das Sie in beide Richtungen navigieren können.
jQuery-Bibliothek
In der Regel ist dank DSL heute genügend Bandbreite vorhanden. Trotz allem lohnt es sich, beim Einsatz von jQuery nur diejenigen Komponenten in die Bibliothek mit zu übernehmen, die Sie auch für Ihr Skript wirklich benötigen. Dazu stellt Ihnen jQuery eine Version "Minified" zur Verfügung.Diese hat in der aktuellen Version 1.5 nur 82,3 kByte. Alternativ können Sie auch direkt einen Link auf die jQuery-Bibliothek setzen, die online bei verschiedenen Anbietern gehostet wird. Eine Übersicht der Anbieter finden Sie unter docs.jquery.com/Downloading_jQuery#CDN_ Hosted_jQuery.
