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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…