10.08.2009
Hover-Effekt mit transparenter Grafik
Sehr schöne Effekte kann man mit Hilfe einer transparenten Hintergrundgrafik beim Hovern über einen Link erzielen. Das vorweggenommene Ergebnis zeigt unsere Demo 1 (oben). Hier wurde dem Navi-Bereich eine Hintergrundgrafik (Gruppenbild) zugewiesen. Der Farbeffekt beim Hovern erfolgt über eine weitere, transparente PNG-Grafik, welche a:hover zugeordnet ist.
Zum Einsatz kommt zunächst ein ganz normales Listen-Menü mit folgendem HTML-Quelltext (ersetzt wie immer die Platzhalter-Raute "#" mit euren Echt-Link-Adressen):
<ul id="navi">
<li> <a href="#">Link 1</a> </li>
<li> <a href="#">Link 2</a> </li>
<li> <a href="#">Link 3</a> </li>
<li> <a href="#">Link 4</a> </li>
<li> <a href="#">Link 5</a> </li>
</ul>
Die Navi selbst erhält folgende Formatierung:
Setzt zunächst unbedingt die äußeren und inneren Abstände auf "0", damit eine einheitliche Browserdarstellung gewährleistet ist.
Es folgen ein paar allgemeine Angaben zur Schriftformatierung, die Listen-Aufzählungspunkte werden entfernt und schließlich wird der Navi das gewünschte Hintergrundbild zugewiesen.
Die Breiten- und Höhenwerte entsprechen denen der verwendeten Hintergrundgrafik, wodurch gleichzeitig ein "Kacheln" verhindert wird.
#navi {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 1.2em;
list-style: none;
background: url(hintergrundgrafik.jpg)
width: 800px;
height: 248px;
}
Da hier eine Horizontal-Navi zum Einsatz kommt, werden die einzelnen Listeneinträge gefloatet (bei einer vertikalen Navigation ist dies nicht erforderlich). Denkt deshalb daran, dass nach Schließen der Horizontalnavi auch wieder gecleart wird.
#navi li {
float: left;
}
Um einen "teil-flächendeckenden" Hover-Effekt zu erreichen, müssen die Links per display: block; zum Blockelement deklariert werden.
Sodann ist etwas Rechenarbeit angesagt: Die Hintergrundgrafik unserer Gesamtnavigation ist im Beispiel 800px breit. Wenn nun fünf Links zum Einsatz kommen, entspricht das einer Einzel-Link-Breite von 160px. Als Höhe verwenden wir den gleichen Wert wie bei der Gesamthintergrundgrafik, hier 248px.
Beachtet dabei: Werden zusätzlich padding- oder border-Werte verwendet, dann reduzieren sich Breiten- und Höhenwerte entsprechend.
Die übrigen Angaben sind allgemeiner Art und müssen deshalb nicht näher erläutert werden.
#navi a:link, #navi a:visited {
display: block;
width: 160px;
height: 248px;
color: #800000;
text-decoration: none;
font-weight: bold;
text-align: right;
}
Das "Sahnehäubchen" bildet nun der Hovereffekt: Neben einer abweichenden Schriftfarbe wird hier eine transparente PNG-Grafik hinterlegt. Die Größe spielt keine besondere Rolle, da sie sich "kacheln" (wiederholen) kann. Ein kleines Bildchen von 10px auf 10px reicht also vollkommen aus. Ihr müsst lediglich darauf achten, dass diese Grafik im PNG-Format abgespeichert wurde und per Grafikprogramm
Somit definieren wir als Hovereffekt:
#navi a:hover {
color: #000090;
background: url(hovergrafik.png);
}
Das wäre es dann auch schon gewesen, mit unserem transparentem Hover-Effekt, wäre da nicht (einmal wieder) der Internet Explorer 6, auf den wir zusätzlich Rücksicht nehmen müssen. Er unterstützt nämlich nicht das transparente PNG-Format unserer Hovergrafik. Für ihn wird auf die bisherige Hintergrundgrafik ein microsoft-spezifischer Transparenzfilter angewandt. Der nachgenannte Code funktioniert zwar; er wird jedoch vom CSS-Validator bemängelt, da er nicht dem offiziellem Standard entspricht - genauso wie der Internet Explarer 6 eben...
* html #navi a:hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='hovergrafik.png', sizingMethod='scale');
background:none;
}
Weitere Anregungen zu diesem Effekt
Dieser "Hover-Transparenz-Effekt" lässt sich natürlich noch in verschiedener Art variieren:
Wenn ihr z.B. für #navi a:hover für jeden Link eine eigene Klasse bildet, z.B. #navi a.gruen:hover und ruft den Link dann auf mit
<li> <a class="gruen" href="#">Link 1</a> </li>
dann könnt ihr jeder Klasse eine andersfarbige Transparenzgrafik zuweisen und jeder Hoverlink erscheint dementsprechend in einer anderen Farbe, wie Demo 2 (unten) mit dem Schwarz-Weiß-Foto zeigt.
Die Umsetzung erfolgt ähnlich dieser Anleitung (Variante 2). Auf eine detaillierte Code-Darstellung mit den hier erforderlichen fünf Einzelklassen habe ich an dieser Stelle verzichtet. Ihr dürft jedoch gerne in den Demo-Quelltext (#navi2) spitzeln.
Eine weitere Spielart wäre es, von einer Farbgrafik eine Schwarz-Weiß-Grafik zu fertigen. Während die Schwarz-Weiß-Grafik als Hintergrundgrafik der Navi dient, wird die Farbgrafik entsprechend den Linkgrößen zerschnitten/gesliced. Die farbigen Einzelgrafiken dienen dann als Hintergrundgrafiken für die einzelnen Hover-Klassen. Damit werden beim Hovern aus einem Schwarz-Weiß-Bild farbige Linksegmente erzielt.
Eurer Fantasie sind dabei keine Grenzen gesetzt.
Zum Schluss bedanke ich mich recht herzlich bei "ladies-choice", die sich für die verwendete Demografik gerne zur Verfügung stellten. Alle übrigens hervorragend ausgebildete und renommierte Musikerinnen mit einem Repertoire aus Funk, Groove, Jazz und Pop. Mein Tipp: Unbedingt hingehen, falls sie mal in eurer Nähe auftreten.