Skriptsteuerung

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 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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".