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.

Inhalt
  1. Wechsel von Hintergründen mit jQuery
  2. Grafik wechseln

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.