15.02.2008

Bildergalerie mit Vergrößerungseffekt

Wie man eine Bildergalerie mit einer CSS-formatierten Liste erstellt, wurde hier beschrieben.
Wir wollen den dafür verwendeten Code als Basis für einen Hover-Effekt verwenden. Mit einigen Ergänzungen sollen die Bilder bei Hovern - wie hier in der Demo - vergrößert dargestellt werden.
Den HTML-Code ergänzen wir wie folgt (rot markiert):

<div id="galerie">
<ul>
<li><a href="#"><img src="rose01.png" alt="Rose 1"><img src="rose01.png" alt="Rose 1" class="gross"></a> Rose 1</li>

<li><img src="rose02.png" alt="Rose 2">Rose 2</li>
. . .
</ul>
</div>

Die Ergänzung <a href="#"> bewirkt, dass bei dem Bild später ein Hover-Effekt angezeigt wird. Zu diesem Zweck wird es "verlinkt".
Der Zusatz <img src="rose01.png" alt="Rose 1" class="gross"></a> soll aufgrund der noch zu definierenden Klasse "gross" bewirken, dass das Bild beim Hovern vergrößert dargestellt wird.
Den bisherigen Bilduntertext entfernen wir, da er beim späteren Vergrößern an einer ungünstigen Stelle angezeigt würde.
So wie beim ersten Listeneintrag rot dargestellt müssen jetzt noch die weiteren Einträge aus dem Ursprungscode entsprechend abgeändert werden. Das sollte dann so aussehen:

<div id="galerie">
<ul>

<li><a href="#"><img src="rose01.png" alt="Rose 1"><img src="rose01.png" alt="Rose 1" class="gross"></a></li>

<li><a href="#"><img src="rose02.png" alt="Rose 2"><img src="rose02.png" alt="Rose 2" class="gross"></a></li>

<li><a href="#"><img src="rose03.png" alt="Rose 3"><img src="rose03.png" alt="Rose 3" class="gross"></a></li>

<li><a href="#"><img src="rose04.png" alt="Rose 4"><img src="rose04.png" alt="Rose 4" class="gross"></a></li>

<li><a href="#"><img src="rose05.png" alt="Rose 5"><img src="rose05.png" alt="Rose 5" class="gross"></a></li>

<li><a href="#"><img src="rose06.png" alt="Rose 6"><img src="rose06.png" alt="Rose 6" class="gross"></a></li>

</ul>
</div>

Um die gewünschten Effekte zu erzielen, müssen noch einige ergänzende CSS-Angaben erfolgen:

#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}

#galerie img
{
width: 150px;
height: 150px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}

#galerie a .gross
{
display: none;
}

#galerie a:hover .gross
{
width: 250px;
height: 250px;
display: block;
position: absolute;
top: -50px;
left: -50px;
z-index: 1;
background: #fff;
}

/*--Spezialangaben für den Internet Explorer 7--*/
*+html #galerie a:hover { z-index: 1;}
*+html #galerie li{position: static;}
*+html #galerie a {position: relative;}

/*--Spezialangaben für den Internet Explorer 6--*/
*html #galerie a:hover {display: block; z-index: 1;}
*html #galerie li{position: static;}
*html #galerie a {position: relative;}

Sehen wir uns an, was die Zusatzangaben (rot) bewirken:
Mit position: relative; wird ein Element in Relation zu seinem "Normalstandort" positioniert. Es wird im Zusammenhang mit einem top-, right-, bottom- oder left-Wert von seiner Normalposition entsprechend verschoben. Hier fehlen solche Zusatzangaben, um eine abweichende Positionierung zu erreichen. Somit wäre die Angabe prinzipiell überflüssig. Sie wird jedoch später in einem anderen Zusammenhang benötigt. Wir kommen darauf zurück.

Die Klasse .gross verwenden wir für die erforderlichen Angaben zur Vergrößerung der Bilder.
Das display: none; bei "#galerie a. gross" hat zur Folge, dass die vergrößerten Bilder im Normalzustand nicht sichtbar sind.

Die nächsten Angaben bei "#galerie a:hover .gross" legen zunächst die Breite und Höhe des vergrößerten Bildes fest.
display: block; bewirkt, dass beim Hovern das Bild überhaupt und mit den zusätzlich hinterlegten Maßen angezeigt wird.
position: absolute; bedeutet, dass das Bild nun in Bezug auf das nächst höhere Element positioniert wird, sofern dieses ebenfalls relativ, absolut oder fixed positioniert ist. Allein aus diesem Grund mussten wir vorher "#galerie li" relativ positionieren (siehe oben).

Soweit die "Theorie". Der Internet Explorer hält sich daran leider nicht, weshalb wir für ihn den CSS-Code etwas tunen müssen:
Anstelle der relativen Positionierung von li benötigt er diese Angabe bei a.
Und ohne die Angabe #galerie a:hover { z-index: 1;} würde er das Hover-Bild nicht komplett in den Vordergrund stellen.
Die Zusatzangaben für den Internet Explorer sind am Ende des CSS-Codes durch Angabe des sogenannten Star-HTML-Hacks hinterlegt (blau).

Für die Positionsangaben top: -50px; left: -50px; ist etwas Rechenarbeit erforderlich: Die kleinen Bilder haben inklusive Padding- und Rahmenwerten eine Größe von 158px auf 158px. Die großen von 258px auf 258px. Sie sollen mittig in Relation zu den kleinen erscheinen. Also müssen sie (ausgehend von der oberen linken Ecke des kleineren Bildes) 50px zurück nach oben und 50px zurück nach links verschoben werden, deshalb das Minuszeichen vor den top- und left-Werten. Mit anderen Bildgrößen sind auch andere Werte erforderlich. Ebenso kann das Hover-Bild auch an anderen Stellen positioniert werden.
Der z-index: 1; lässt das vergrößerte Bild im Vordergrund erscheinen.
Durch Definition einer Hintergrundfarbe wird in manchen Browsern vermieden, dass der Rahmen des Vorschaubildes durchscheint.

Damit ist unsere "Hover-Vergrößerungsgalerie" fertig und ihr könnt sie im Demo-Beispiel ansehen.

Hinweise:
Möglicherweise habt ihr zwei Nachteile dieser Hover-Galerie schon selbst bemerkt:

Da im Beispiel das gleiche Bild für die Normal- und Hover-Darstellung verwendet wird, kann es je nach Vergrößerungsgrad zu unerwünschten Verpixelungen und Qualitätsverlusten kommen. Wer dies vermeiden möchte, kann mit einem Grafikprogramm jeweils auch ein zweites Bild mit den größeren Maßen erstellen, abspeichern und im HTML-Teil als zweites Bild im Listeneintrag einbauen. Für diese Variante wird empfohlen, die größeren Bilder "vorzuladen", damit sie beim Hovern ohne Zeitverzögerung erscheinen. Hierzu gibt es mehrere Möglichkeiten, die hier sehr verständlich erklärt sind.

Der zweite Nachteil besteht darin, dass durch die absolute Positionierung der vergrößerten Bilder diese in Randnähe außerhalb des Browserfensters angezeigt werden können, oder andere Inhalte der Seite verdecken. Durch entsprechende Begrenzung und Positionierung des Divs "#galerie" kann dies vermieden werden. Ich habe dies in der Demo bewusst unterlassen, damit dieser Effekt sichtbar wird.

Webhosting preiswert! - Alfahosting.de

Tipp:
Abschließend noch ein kleiner Tipp: Wer mehrere solcher Galerien auf einer Seite darstellen möchte, ersetzt überall bei #galerie die vorangestellte Raute durch einen Punkt und bildet damit eine Klasse, also .galerie. Schließlich dürfen ID's auf einer Seite nur einmal vorkommen, Klassen dagegen mehrmals. Aufruf dann im HTML-Teil mit <div class="galerie"> anstelle von <div id="galerie">

Quelle:
Diese Anleitung erfolgte in Anlehnung an diese Demonstration. Darauf aufmerksam wurde ich durch einen Hinweis der Gautinger Weltenbummler.

nach oben