Skriptsteuerung

Wechsel von Hintergründen mit jQuery

Ein wechselnder Hintergrund bringt Abwechslung ins Aussehen Ihrer Site. Lesen Sie, wie Sie mit JavaScript und CSS die Farbschemata regelmäßig austauschen.

  1. Wechsel von Hintergründen mit jQuery
  2. Grafik wechseln
internet, webdesign, jquery, javascript, css, cookie, skriptsteuerung

© Internet Magazin

internet, webdesign, jquery, javascript, css, cookie, skriptsteuerung

Das Beispiel überlässt die Steuerung des Hintergrunds dem Anwender, Sie können jedoch das Skript als Basis für einen zeitgesteuerten Wechsel nutzen. Damit der aktuelle Zustand des Hintergrunds gespeichert wird, wird zusätzlich ein Cookie verwendet.

Der Aufbau der HTML-Seite

Die HTML-Seite ist nur der Rahmen für die entwickelten Funktionen, es verbirgt sich hier keine weitere Funktion dahinter und es wurde auch kein Wert auf die optische Gestaltung der Site gelegt. Fünf externe Dateien werden in die HTML-Seite eingebunden.

<link rel="stylesheet" href=
"css/styles.css" type="text/
css" media="screen, projection" /><link rel="stylesheet" id=
"aktiver-hg" type="text/css" href=
"hg/default/hg.css" /><script type="text/javascript" src=
"js/lib/jquery/jquery-1.5.min.js"></script><script type="text/javascript" src=
"js/lib/plugins/jquery.cookie.js"></script><script type="text/javascript" src=
"js/hg-wechsler.js"></script>

Der erste Link integriert die CSS-Datei, mit der Sie grundlegende optische Gestaltungen der HTML-Seite vornehmen.Der zweite Link ist ein virtueller Link, da die Datei hg/default/hg.css physikalisch nicht existiert. Der Link samt ID wird im späteren Verlauf dazu verwendet, das aktuell ausgewählte Theme zu repräsentieren. Mit den drei Skripten binden Sie die aktuelle Fassung von jQuery, das Plugin Cookie sowie Ihren eigenen JavaScript-Programmcode ein.

Auswahlfelder

Zur Auswahl der einzelnen Themes nutzen wir eine Liste, mit der verschiedene Bilder untereinander dargestellt werden. Sie können diese alternativ auch in einer Tabelle anordnen oder mithilfe von CSS an entsprechender Stelle auf dem Bildschirm platzieren. Für den Zugriff auf die einzelnen Bilder wird das div-Tag <div id="hg-frame"> eingesetzt, die einzelnen Listelemente werden später über den per rel-Parameter vergebenen Namen adressiert.

<div id="hg-frame"><ul><li><a href="#" rel="hg01"><img src=
"hg/hg01/vorschau.gif" alt=
"Hintergrund 01" /></a></li><li><a href="#" rel="hg02"><img src=
"hg/hg02/vorschau.gif" alt=
"Hintergrund 02" /></a></li><li><a href="#" rel="hg03"><img src=
"hg/hg03/vorschau.gif" alt=
"Hintergrund 03" /></a></li><li><a href="#" rel="hg04"><img src=
"hg/hg04/vorschau.gif" alt=
"Hintergrund 04" /></a></li></ul></div>

Im Beispiel gibt es vier unterschiedliche Hintergründe mit den Namen hg01 bis hg04. Diese werden durch eine Grafik mit dem Namen vorschau.gif repräsentiert. Dabei handelt es sich um ein normales GIF der Größe 125x75 Pixel, das im jeweiligen hg-Ordner gespeichert ist. Damit ist die Grundkonstruktion der HTML-Seite fertig, jedoch ist noch einiges an Arbeit zu leisten.

Die CSS-Datei

Es wird noch kein Hintergrund angezeigt und auch die Aufzählungszeichen der Liste sind noch nicht zu sehen. Mit der CSS-Datei werden die ersten Mängel beseitigt.

ul {
list-style:none;
}

Mit der CSS-Definition für die Liste (ul) werden die Aufzählungszeichen entfernt. Anschließend gibt es eine Grundkonfiguration des body-Bereichs. Die Schriftart und -größe werden festgelegt und die initiale Hintergrundfarbe auf Schwarz gesetzt.

body {
font: .8em/1.2em Arial, Helvetica,
sans-serif;
background: white;
min-height: 100%;
}

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.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…