Man sieht sie immer mehr, die Bild- und HTML-Popups, welche den Hintergrund der Seite abdunkeln und das eigentliche Bild im Vordergrund vergrößert darstellen:
Statt einen Link in einem neuen Fenster darzustellen, wird der Inhalt einfach direkt in der Seite angezeigt. Das ganze ist zudem sehr leicht zu realisieren:
Kleiner Hinweis: das ganze Beispielscript gibt es am Ende des Artikels zum Download.
Zuerst benötigen wir ein kostenloses Java-Script, welches unter http://www.dolem.com/lytebox/ heruntergeladen werden kann. Dieses entpacken wir in einen Ordner auf der Festplatte:
Nun binden wir das Script in eine HTML-Seite ein. Dazu fügen wir den folgenden Code in den Head-Bereich der HTML-Seite ein:
<script type="text/javascript" language="javascript" src="lytebox.js"></script> <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
Damit ist das Script auch schon eingebunden. Jetzt müssen wir nur noch Links modifizieren, indem wir einen Verweis auf die Lytebox (rel=”lytebox” in a-Tag) eintragen:
<a href="pic.jpg" rel="lytebox"> <img height="75" src="pic_tn.jpg" style="font-family: Arial, Helvetica, Sans-Serif"
width="100" border="0" /> </a>
Wenn wir einen Titel anzeigen lassen wollen, fügen wir einfach einen title-Attribut in der a-Tag ein:
<a href="pic.jpg" rel="lytebox" title="Stausee des Halblech"> <img height="75" src="pic_tn.jpg" style="font-family: Arial, Helvetica, Sans-Serif"
width="100" border="0" /> </a>
Das ganze funktioniert auch prima mit HTML-Seiten, wie z.B. einem Kontaktformular des DA-FormMaker:
<a href="formular.html" rel="lyteframe" rev="width: 600px; height: 450px; scrolling: no;">
Klicke mich!
</a>
Das ganze sieht dann so aus:
Damit das Formular vollständig angezeigt wird, lässt sich zudem die Größe festlegen.
Das wars, gar nicht mal so schwer oder?