17.09.2010
Highslide- und Zoom-Effekt mit CSS
Ein sogenannter "Highslide-Effekt", bei dem ein kleiner Bildausschnitt zum Vollbild gezoomt wird, beruht meist auf einem Javascript.
Wenn ihr auf die Bilder klickt, sieht das dann so wie dem "Freiheitstraum" meiner Grafikpartnerin Garnet aus.
Dieser Effekt lässt sich ähnlich auch mit CSS realisieren, wie ihr seht, wenn ihr mit dem Mauszeiger das folgende Bild berührt:
Wir benötigen hierzu lediglich eine Grafik in der Größe, wie sie später im Original dargestellt werden soll. Für den Zoomeffekt verwenden wir einen Pseudolink, der mit einer CSS-Klasse auf unser Vorhaben getrimmt wird.
Der HTML-Code für diesen Link sieht recht harmlos aus und bewirkt zunächst rein gar nichts; er ist noch nicht einmal sichtbar:
<a class="zoom" href="#"></a>
Im Zusammenspiel mit den nun folgenden Angaben für die verwendete CSS-Klasse .zoom wird sich dieses Stückchen Quelltext aber noch ganz schön mausern.
Da wir die Grafik als Hintergrundgrafik einbinden, definieren wir den Link als Blockelement, dem damit auch eine bestimmte Breite und Höhe zugewiesen kann.
Daraus ergibt sich für unseren Link zunächst folgender CSS-Code:
a.zoom {
display: block;
}
Das alles ändert an unserem Link immer noch nichts Sichtbares.
Für die verkleinerte Bilddarstellung definieren wir nun den Link für seinen Normal- und Visited-Zustand:
Als Breiten- und Höhenangaben können individuelle Werte verwendet werden, die idealerweise der Größe des gewünschten Bildausschnitts entsprechen.
Die Originalgrafik (im Beispiel oben 560px auf 300px) wird als Hintergrundgrafik eingebaut. Weil die Größe des Links jedoch begrenzt wurde, wird folglich nur ein Ausschnitt dieser Grafik angezeigt. Mit entsprechenden Werten zur background-position können wir sogar sehr genau steuern, welcher Bildausschnitt der Gesamtgrafik dargestellt werden soll. Werden keine Angaben zu background-position gemacht, erscheint stets die linke obere Ecke der Originalgrafik.
Daraus ergeben sich folgende zusätzliche Style-Angaben:
a.zoom:link, a.zoom:visited {
width: 200px;
height: 150px;
background-image: url(grafik.jpg);
background-position: -170px -40px;
}
Erklärung zu background-position
Bei "background-position" bezieht sich der erste Wert auf die horizontale und der zweite Wert auf die vertikale Position.
Negative Werte verschieben die Grafik nach links bzw. nach oben; positive Werte verschieben sie nach rechts bzw. nach unten. Ist nur ein Wert angegeben, gilt dieser einheitlich sowohl für die horizontale als auch für die vertikale Position.
In diesem Beispiel wird die Grafik also 170px nach links und 40px nach oben verschoben, damit der Torwart mit der Nummer 1 als Grafikausschnitt erscheint.
Der Bildausschnitt ist nun bereits erkennbar. Nun soll beim Hovern allerdings noch die Gesamtgrafik erscheinen. Somit müssen wir für den Link-Hover-Zustand lediglich die Breiten- und Höhenwerte vergrößern, damit sie denen der verwendeten Grafik entsprechen. Die Hintergrundposition setzen wir mit dem Wert "0" auf die linke obere Ecke, damit Konflike mit einer eventuellen Positionierung im Normalzustand ausgeschlossen werden. Daraus ergeben sich folgende Angaben:
a.zoom:hover {
width: 560px;
height: 300px;
background-position: 0;
}
Das war's dann auch schon und unser "CSS-Highslide-Effekt" ist fertig. Wie ihr seht, kann aus einem kleinen Bildausschnitt mitunter eine ganz schöne Überraschung werden:
Sofern erforderlich, kann noch etwas "Feintuning" erfolgen: Soll die Grafik z.B. von Text umflossen werden, weisen wir a.zoom:link noch eine Float-Angabe zu.
Habt ihr unterschiedliche Grafiken im Hoch-/Querformat, dann müsst ihr eben mehrere CSS-Klassen verwenden und unterschiedliche Höhen- und Breitenwerte hinterlegen.
An dieser Stelle wollen wir uns jedoch auf den reinen "Zoom-Effekt" beschränken.