Grafische Rollover-Effekte
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Anstelle von Textlinks sollen grafikbasierte Rollover-Effekte benutzt werden.
Lösung
Der erste Schritt besteht darin, den Text innerhalb des Anker-Elements mit einem span-Element zu umgeben:
<a href="/" id="linkhome"><span>Homepage</span></a>Anstelle von JavaScript können Sie nun die Eigenschaft background-image zusammen mit den Selektoren für die Pseudoklassen :hover und :active benutzen, um die Bilder auszutauschen, wenn sich der Mauszeiger über dem Link befindet (siehe nächste Abbildung):
a span {
display: none;
}
a:link {
display: block;
width: 125px;
height: 30px;
background-image: url(btn.gif);
background-repeat: no-repeat;
background-position: top left;
}
a:link:hover {
display: block;
width: 125px;
height: 30px;
background-image: url(btn_roll.gif);
background-repeat: no-repeat;
background-position: top left;
}
a:link:active {
display: block;
width: 125px;
height: 30px;
background-image: url(btn_on.gif);
background-repeat: no-repeat;
background-position: top left;
}
Abbildung: Der grafische Link in den verschiedenen Zuständen (Standarddarstellung, Mauszeiger über dem Link, Link aktiv).
Diskussion
Das Ersetzen von Text durch eine Grafik hat fünf Vorteile:
- Der Text wird von der Präsentation getrennt. Das Bild, das eine spezielle typografische Formatierung aufweist, ist Teil der Darstellung und wird daher durch eine Stildefinition kontrolliert. Der Inhalt innerhalb der Markup-Struktur des Dokuments bleibt dabei als reiner Text erhalten.
- Eine grafikbasierte Überschrift kann durch eine einzige Änderung des Stylesheets für die gesamte Website angepasst werden.
- Die Methode funktioniert sehr gut mit alternativen Stylesheets und dem sogenannten Style Sheet Switching (bei dem der Benutzer aus mehreren Designs wählen kann). Durch die Verwendung des span-Tags innerhalb eines Elements ist es möglich, den HTML-Text zu verstecken und ein Designelement (z.B. eine Rollover-Grafik) als Hintergrundbild darzustellen.
- Der Benutzer kann das Element auch bei der Verwendung eines nicht CSS-fähigen Browsers betrachten. In diesem Fall wird der Standard-HTML-Text angezeigt, wodurch zudem keine unnötigen Bilder heruntergeladen werden müssen.
- Diese Lösung ist sauberer und einfacher als die JavaScript-basierte Technik.
Diese Technik können Sie übrigens auch für Elemente benutzen, bei denen kein Rollover-Effekt eingesetzt werden soll. Wenn Sie für Überschriften beispielsweise einen Zeichensatz verwenden wollen, den die meisten Benutzer wahrscheinlich nicht installiert haben, so können Sie stattdessen eine Grafik einsetzen. Dafür müssen Sie zuerst den richtigen Markup-Code verwenden (siehe nächste Abbildung):
<h2 id="headworld"><span>Hallo Welt!</span></h2>
Abbildung: Standarddarstellung der Überschrift.
Danach können Sie mit Hilfe der folgenden CSS-Regeln die Darstellung des Textes verhindern und das gewünschte Hintergrundbild einfügen (siehe folgende Abbildung):
h2#headworld span {
display: none;
}
h2#headworld {
width: 395px;
height: 95px;
background-image: url(heading.gif);
background-repeat: no-repeat;
background-position: top left;
}
Abbildung: Die HTML-Überschrift wurde durch ein Bild ersetzt.
Diese Methode wird gelegentlich auch als Fahrner Image Replacement (FIR) bezeichnet (nach Todd Fahrner).
Ein Nachteil dieser Lösung zeigt sich bei der Benutzung von Bildschirmleseprogrammen, also Programmen, mit denen Computer auch blinden oder sehbehinderten Menschen zugänglich gemacht werden. Bestimmte Bildschirmleseprogramme lesen keine Elemente, für die display: none festgelegt wurde.
Alternativ zu dieser Lösung können Sie auch das Leahy-Langridge Image Replacement (LIR) verwenden. Die von Seamus Leahy und Stuart Langridge unabhängig voneinander entwickelte LIR-Methode schiebt den Text aus dem sichtbaren Bereich heraus. Ein Vorteil bei dieser Methode besteht darin, dass kein zusätzliches span-Element benötigt wird, um den Text zu verstecken. So sieht der HTML-Code für eine Überschrift einfach wie folgt aus:
<h2 id="headworld">Hallo Welt!</h2>Das Bild für die Überschrift ist zu sehen, weil in der CSS-Regel der Innenabstand der exakten Höhe der Bild-Überschrift entspricht. Gleichzeitig erhält die Eigenschaft height den Wert 0:
h2#headworld {
/* Bildbreite */
width: 395px;
/* Die Bildhöhe ist der erste Wert für die Innenabstände */
padding: 95px 0 0 0;
overflow: hidden;
background-image: url(heading.gif);
background-repeat: no-repeat;
height: 95px;
voice-family: "\"}\"";
voice-family: inherit;
height: 0px !important;
}Die letzten vier Zeilen dieser CSS-Regel sind nötig, um die schlechte Unterstützung von Internet Explorer für das Boxmodell zu umgehen. Dadurch wird die Höhe im Internet Explorer mit 95 Pixel festgelegt, während in anderen Browsern eine Höhe von null Pixeln zugewiesen wird.
Eine weitere Methode zum Erzeugen grafischer Rollover-Effekte basiert auf der Eigenschaft background-position, die als Pixy-Methode bekannt wurde. Dabei werden die Bilder für alle drei Rollover-Zustände in einem gemeinsamen Bild gespeichert, dessen Position je nach Zustand mit background-position verschoben wird, wie in der nächsten Abbildung gezeigt:
a span {
display: none;
}
a:link, a:visited {
display: block;
width: 125px;
height: 30px;
background-image: url(btn_omni.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
a:link:hover, a:visited:hover {
display: block;
width: 125px;
height: 30px;
background-image: url(btn_omni.gif);
background-repeat: no-repeat;
/* Bild um 30 Pixel nach oben verschieben */
background-position: 0 -30px;
}
a:link:active, a:visited:active {
display: block;
width: 125px;
height: 30px;
background-image: url(btn_omni.gif);
background-repeat: no-repeat;
/* Bild um 60 Pixel nach oben verschieben */
background-position: 0 -60px;
}
Abbildung: Die verschiedenen Teile des Rollover-Bildes.
Warnung:
Fast alle gängigen Methoden zur Bildersetzung haben den Nachteil, dass Benutzer nichts zu sehen bekommen, wenn die Darstellung von Bildern abgestellt wurde, nicht funktioniert oder die Bilder einfach nicht geladen werden, obwohl der Browser CSS eigentlich unterstützt. Sie sollten also vor dem Erstellen Ihrer Dokumente genau überlegen, welche Methode für Ihre Zwecke am ehesten geeignet ist. Vermeiden Sie das Ersetzen von Bildern in wichtigen Titelzeilen.
Siehe auch
- Das Rezept HTML-Text durch ein Bild ersetzen,
- eine weitere Demonstration der LIR-Methode von Seamus P. H. Leahy und
- eine Anleitung zum Erstellen schnellerer CSS-basierter Rollover-Effekte, ohne die Bilder dabei vorher laden zu müssen.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln