Teil 2: Webdesign: CSS und Layer

Mausklicks mit Javascript

Nachdem Sie im ersten Schritt gesehen haben, was mit HTML-Standard unter Verwendung von etwas CSS möglich ist, zeigen wir Ihnen im nächsten Schritt, wie Sie mit einfachen Mitteln und etwas Javascript eine Bildergalerie zaubern können. Hierbei wird das onClick-Ereignis eines Anchor-Tags abgefragt und mit einer Reaktion versehen, anstelle beispielsweise wie vorher auf ein Hover-Ereignis einzugehen. In diesem Beispiel wird auf jede weitere Formatierung von Text verzichtet. Führen wir das begonnene Beispiel von vorhin fort, so werden nun die drei Experten näher vorgestellt - dazu gibt es jeweils ein Thumbnail und wenn Sie darauf klicken, erscheinen Jürgen Klinsmann, Oliver Kahn oder auch das Orakel von Delphi immer an der gleichen Stelle.

Die Steuerungsfunktion wird sowohl mit dem Bild, als auch mit dem darunter stehenden Link verknüpft:

Sowohl beim Anklicken des Bildes, als auch beim verknüpften Link wird die Funktion Fototausch aufgerufen und der Name des Bildes sowie der Name des Experten übergeben - im dargestellten Beispiel Jürgen Klinsmann. Sie können entweder ein richtiges Vorschaubild generieren und dieses unter < img src="klinsmann.jpg" ... > verlinken oder aber nur mit einem Bild arbeiten und diesem eine verkleinerte Höhe und Breite zuweisen. Achten Sie in diesem Fall darauf, dass die Seitenverhältnisse auch passen, damit das Bild nicht verzerrt erscheint.

Die verknüpfte Javascript-Funktion erledigt den eigentlichen Teil der Arbeit und weist dem großen Bild in der oberen Hälfte des Bildschirms die Großansicht des gerade angeklickten Experten zu. Das Besondere an diesem Skript ist, dass das Bild immer an der gleichen Stelle positioniert wird. Sind die Zielbilder auch noch gleich groß, scheint es, als wenn Sie ausgetauscht werden. Zusätzlich dazu können Sie natürlich auch noch individuellen Text anzeigen. In diesem Beispiel haben wir uns auf die Übergabe des Expertennamens beschränkt. Sie können das Coding aber auch beispielsweise für eine umfassende Produktvorstellung mit gleicher Formatierung verwenden und neben einem Bild auch die Beschreibung des Artikels mitgeben.

Die Funktion Fototausch generiert als Erstes eine Variable Bildunterschrift als Zeigerobjekt, die mit dem < p >-Tag beschreibung verknüpft wird. Diese bekommt mit Bildunterschrift.firstChild.nodeValue = Beschreibung; den neuen Inhalt aus der Übergabevariable Beschreibung zugewiesen. Anschließend wird dem Bild mit dem Namen grossbild der Verweis auf das Bild des nächsten Experten übergeben. Zum Schluss wird mit scrollTo(0,0) noch komplett nach oben auf die Webseite gescrollt, damit das Großbild sichtbar ist, auch wenn Sie das Thumbnail eines Experten vom unteren Ende der Liste angeklickt haben. Ansonsten würde zwar das Bild ausgetauscht, Sie bekommen dies aber nicht direkt mit.

Eine andere Art der Darstellung von Bildern ist der so genannte Lightbox-Effekt, bei dem nach dem Anklicken eines Objekts der Hintergrund verdunkelt wird und das Bild in den Vordergrund rückt. Für diesen Effekt sind einige Zeilen Coding und eine Reihe von CSS-Formatierungen notwendig, welche den Rahmen dieses Workshops sprengen würden. Internet Magazin hat jedoch für Sie ein Out-of-the-Box-Script gefunden, das Sie auf Ihrer Homepage integrieren können. Das Beispiel finden Sie im Textkasten.

Platz sparen

Oftmals sind auf einer Webseite bereits genügend Inhalte platziert, sodass es schwierig ist, noch zusätzliche Informationen sinnvoll zu platzieren. An dieser Stelle hilft wieder einmal die Kombination von CSS und Javascript. Im nächsten Beispiel wird eine Box generiert, die beim Berühren des Links erscheint und anschließend auch wieder verschwindet.

Dazu ist eine Reihe von Vorarbeiten notwendig. Definieren Sie als Erstes das Aussehen der Box - im Beispiel wird es eine Box mit schwarzer Umrahmung und einem hellblauen Hintergrund. Festgelegt wird dies alles mithilfe der CSS-Definition background-color. Zusätzlich soll die Box direkt unter dem Link hängen. Dafür, wird lediglich eine gestrichelte Linie verwendet. Der dritte Punkt, den Sie beachten sollten, ist der Abstand zwischen Text und Rahmen. Damit der Text nicht zu sehr am Rand klebt, sollten Sie ihm mit dem padding-Attribut etwas Luft verschaffen.

Zusätzlich soll um den Link ein Rahmen erscheinen, was durch folgende Formatierung erreicht wird:

Jetzt müssen Sie die Stylesheets nur noch mit den entsprechenden Objekten im body-Bereich verknüpfen:

Ein- und Ausblenden

Sobald Sie die Maus über den Link bewegen, werden die Zusatzinformationen angezeigt. Das Ereignis wird über das Event onmouseover des Links ausgelöst:

Damit die Inhalte nicht auf der Seite stehen bleiben, wird ein zweites Event onmouseout benötigt, welches die Box wieder verschwinden lässt.

Die Hauptarbeit wird diesmal von der Javascript-Funktion anzeige_text() erledigt:

Die erste if-Abfrage bewegt den Zeiger vom aktuellen Anchor-Tag mithilfe des Strukturbaums zum nächst höheren Knoten und weist diesen der Variable targetElement zu. Die zweite if-Schleife ist lediglich eine zusätzliche Absicherung.

Abschließend findet die Zuweisung der Werte none und block statt, sodass der Inhaltsblock abhängig zum aktuellen Zustand angezeigt oder ausgeblendet wird. Führen Sie das Skript zu diesem Zeitpunkt aus, so werden Sie feststellen, dass die Inhalte der Box zu Beginn angezeigt werden, der Initialwert der Anzeigevariablen also auf block steht. Deswegen gibt es eine zweite kleine Funktion initialize(), welche beim Laden des body-Bereichs aufgerufen wird und das div-Tag mit der ID eminfo entsprechend ausblendet.

Eigene Kreativität

Sie sehen, dass Hyperlinks nicht nur Informationen hervorheben, sondern auch Folgeaktionen auslösen können. Dazu können Sie von reinem HTML in Verbindung mit CSS bis hin zu Javascript-Funktionen alles verwenden. Die Beispiele haben Ihnen somit hoffentlich einen guten Anstoß für Ihre eigenen Entwicklungen gegeben. Was sich hinter dem "Lightbox-Effekt" verbirgt, erfahren Sie auf Seite 3...