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.
- Wechsel von Hintergründen mit jQuery
- Grafik wechseln
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...
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%;
}
