Hyperlinks 2.0

Teil 3: Webdesign: CSS und Layer

Inhalt
  1. Webdesign: CSS und Layer
  2. Teil 2: Webdesign: CSS und Layer
  3. Teil 3: Webdesign: CSS und Layer

Der Lightbox-Effekt

Im ersten Schritt laden Sie den fertigen Baukasten von der Lightbox-Website herunter und extrahieren die Dateien. Anhand der Beispielskripte bsp6.html und bsp6a.html sehen Sie, wie einfach das Skript in Ihre eigene Seite integrierbar ist.

Wenn Sie die Pfade nicht anpassen möchten, kopieren Sie am besten die Ordner js, css und images in das gleiche Verzeichnis, im dem sich auch die beiden HTML-Dateien befinden. Fügen Sie anschließend folgende Zeilen in den -Bereich Ihrer Webseite ein:

<script type="text/javascript" src=
"js/prototype.js"></script><script type="text/javascript" src=
"js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src=
"js/lightbox.js"></script><link rel="stylesheet" href="css/
lightbox.css" type="text/css" media="screen" />

Sollten Sie die drei Ordner an eine andere Stelle kopiert oder diese umbenannt haben, so passen Sie die Pfadangabe entsprechend an.

Die Toolbox bietet Ihnen nun zwei Optionen an: es wird nur das Bild, welches Sie aktuell angeklickt haben, hervorgehoben und Sie müssen für die Anzeige des nächsten Bildes das Fenster wieder schließen und dieses anklicken. Die zweite Alternative ermöglicht Ihnen den Start einer Diashow; Sie können zwischen den Bildern hin und her navigieren, wobei das angeklickte Bild den Startpunkt darstellt.

Für die erste Option fügen Sie in das Anchor-Tag den Zusatz rel="lightbox" ein, sodass die Verlinkung am Beispiel Jürgen Klinsmann wie folgt aussieht:

<a href="klinsmann.jpg" rel=
"lightbox"><img src="klinsmann.jpg"width="180" height="130" /></a>

Im zweiten Fall wird das Attribut rel erweitert und Sie können für die zusammenhängenden Bilder eine Gruppe bilden, zwischen der Sie wie beschrieben navigieren können. Den Gruppennamen können Sie frei wählen - in unserem Beispiel haben wir "expertenrunde" gewählt.

<a href="klinsmann.jpg" rel=
"lightbox[expertenrunde]"><img src="klinsmann.jpg" width="180" height="130" /></a>

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.