Die Universal-Lupe aus CSS ist nur zum Vergrößern viel zu schade. Ausführliche Bauanleitung für zwei verschiedene Modelle zum Einblenden von Vorschau- oder Lupenbildern, erklärendem Text oder beidem bei einfacher Maus-Berührung – ohne JavaScript.
Sie gehört in die Kategorie der sog. hover-Effekte: Auslöser ist das Darüberfahren (hovern) mit der Maus. Hier schalten wir damit ein CSS-Attribut von hidden auf visible und machen so bisher verborgenes sichtbar. Die optische Illusion einer Lupe entsteht im Grafik-Programm. Die vorbereitete Vergrößerung wird einfach eingeblendet.
Schön Groß, CSS-Bildschirmlupe im Einsatz
Weitere Einsatzmöglichkeiten finden sich zahlreiche: In einem Menü könnten eingeblendete Vorschaubilder die Orientierung erleichtern, genauso gut lassen sich aber auch zusätzliche Erklärungen, Tipps, Warnungen oder Werbung einblenden. Anbringen lässt sich der vielseitige Effekt überall, wo ein Link hinpasst.
CSS-Lupe mit Grafik
<ul>
<li><a href="#">eins<b
class="lupe1"></b></a></li>
<li><a href="#">zwei<b
class="lupe2"></b></a></li>
<li><a href="#">drei<b
class="lupe3"></b></a></li>
</ul>
Für die Demonstration nehmen wir eine Ungeordnete Liste <ul>. Wichtiges Detail ist das <b> Element innerhalb des Links. Das Element zur Textformatierung dient hier als willkommener CSS-Aufhänger: Es bekommt eine class zugewiesen und wird sofort wieder geschlossen.
ul a { position: relative; }
ul a b {
width: 225px; height: 175px;
position: absolute; left: 50px; top: -10px;
visibility: hidden; }
ul a:hover { background: transparent; }
ul a:hover b { visibility: visible; }
b.lupe1 { background: url(eins.gif); }
b.lupe2 { background: url(zwei.gif); }
b.lupe3 { background: url(drei.gif); }
Wir positionieren den Link relativ (ul a { position: relative;}) damit die Angabe der Position der Grafik relativ zum Link gilt. Ansonsten würde das Fenster immer an der gleichen Position in der linken oberen Ecke des Bildschirms erscheinen. Das im Link versteckte <b> Element wird immer noch unsichtbar (visibility: hidden;) auf die Größe des Bildes aufgezogen (width: 225px; height: 175px;) und mit links 50 px Abstand, 10 px nach oben gerückt in Position gebracht (position: absolute; left: 50px; top: -10px;).
Für Microsoft-Browser ist es nötig, dem hover Zustand des Links eine Hintergrundfarbe zu geben. Standardkonforme Browser benötigen die Angabe nicht, aber mit background: transparent; können wir auch nichts verkehrt machen.
{ul a:hover b { visibility: visible; } schaltet das bisher versteckte <b> Element beim Berühren des Links auf sichtbar. Die letzten drei Einträge ordnen den Links die richtigen Bilder zu.
CSS-Textfenster
Bis jetzt haben wir ein vorbereitetes Bild eingeblendet um die Illusion einer Lupe zu erzeugen. Viel flexibler gestaltet sich die Sache mit einem Textfenster. Den Rahmen aus dem Beispiel können wir weiterverwenden. Auch der Quelltext bleibt weitgehend gleich.
Eingeblendetes Texfenster mit Erläuterungen oder Hinweisen
<ul>
<li><a href="#">eins<b>Lorem ipsum
...</b></a></li>
<li><a href="#">zwei<b>Fusce volutpat
...</b></a></li>
<li><a href="#">drei<b>Nulla imperdiet
...</b></a></li>
</ul>
Als Grundgerüst nehmen wir wieder eine Ungeordnete Liste <ul>. Wir schachteln <b> Elemente in Links und nutzen sie diesmal auch, um den einzublendenden Text unterzubringen. Weil alle Fenster das gleiche Hintergrundbild mit dem Rahmen bekommen, können wir auf eigene Klassen für die Links verzichten.
ul a { position: relative; }
ul a b {
width: 185px; height: 135px;
position: absolute; left: 50px; top: -10px;
visibility: hidden; }
ul a:hover { background: transparent; }
ul a:hover b {
visibility: visible;
background-image: url(rahmen.gif);
padding: 20px;
font: normal 12px "Times New Roman", Times, serif;
text-decoration: none; color: #000; }
b:first-letter { font-size: 36px; float: left; }
Die ersten drei Anweisungen sind fast völlig identisch – nur die Rahmengröße müssen wir anpassen. Zwar hat der Rahmen die gleiche Größe wie oben (225px mal 175px), berücksichtigen müssen wir hier aber noch 20px padding ringsum (padding: 20px,) also 225-20-20=185 und 175-20-20=135.
Mit Berühren des Links schalten wir erneut das <b> Element auf visible (ul a:hover b {visibility: visible;}). Die übrigen Angaben sind optischer Natur und dienen der gefälligen Text-Formatierung.
Wem der starre grafische Rahmen nicht zusagt, kann alternativ auf das Hintergrundbild verzichten und stattdessen die CSS-eigene border Anweisung verwenden. Soll sich die Größe des Fenster der Textmenge anpassen, ist es ratsam nur width oder height vorzugeben, in der anderen Dimension erfolgt dann die gewünschte Größenanpassung. Möchte man auf der anderen Seite sicher stellen, dass die vorgegebene Fenstergröße auf jeden erhalten bleibt, hilft overflow: hidden durch Größenänderungen im Browser aus dem Rahmen laufenden Text dezent verschwinden zu lassen.
Um keine Überraschungen mit abweichenden Browser-Darstellungen zu erleben, ist der richtige Doctype wichtig:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Je nach Layout kann es außerdem notwendig sein, dem Fenster einen genügend hohen z-index zuzuweisen, damit es nicht von anderen Elementen auf der Seite verdeckt wird.
Getestete Browser: IE 6.0, 7 Beta 2 Preview, Firefox, Mozilla, Opera ab 7.1, Netscape ab 7.2 – Credits: Stu Nicholls ™
