Arbeit mit CSS - Links mit Rollover-Effekt

Die Verwendung von Rollover-Effekten für Verweise (Links) bietet eine einfache und optisch anspruchsvolle Möglichkeit um sowohl das Design als auch die Benutzbarkeit eines Web-Dokumentes zu verbessern. Allerdings kann bei übertriebener Anwendung dieser Effekte der erhoffte Vorteil auch schnell zu einem Nachteil werden, dazu aber später.

Beginnen wir mit unserem ersten Beispiel:

Beispiel 1 ein farbiger Balken

Wir beginnen mit einem sehr einfachen Beispiel, ein farbiger Balken soll links neben dem Verweis erscheinen sobald dieser mit der Maus "überfahren" wird.

Das (X)HTML-Grundgerüst:

<div id="navigation">
 <ul>
  <li><a href="foo1.html">Link 1</a></li>
  <li><a href="foo2.html">Link 2</a></li>
  <li><a href="foo3.html">Link 3</a></li>
  <li><a href="foo4.html">Link 4</a></li>
 </ul>
</div>

Natürlich müssen die frei erfundenen Dateinamen noch durch real existierende ersetzt werden.

Dieses Beispiel anzeigen

Wie erwartet werden uns vier "Standardverweise", ohne besondere Formatierung, in einer Liste angezeigt.

Die Formatierung mit CSS:

#navigation
{
 width: 20%;
}

  • Hier geben wir die Breite für die gesamte Navigationsbox an.

#navigation ul
{
 list-style-type: none;
 padding: 0;
}

  • Die Listeneigenschaft "list-style-type" legt aufgrund des Wertes "none" fest, dass keine Bullet-Zeichen vor den einzelnen Listenpunkten angezeigt werden.
  • Die Eigenschaft "padding: 0;" verhindert das Einrücken der Listenpunkte.

#navigation li
{
 margin-bottom: 5px;
}

  • Hier legen wir den Abstand zwischen den Verweisen fest.

#navigation a
{
 display: block;
 font-family: Taloma, Arial, Helvetica, serif;
 font-size: 0.8em;
 color: #03f;
 background-color: #ddd;
 border-left: solid 10px #ddd;
 padding-left: 20px;
}

  • Die Eigenschaft "display" und ihr Wert "block" legen fest, dass die Links als Block-Elemente dargestellt werden. Dadurch dehnen sie sich auf die volle Breite der Navigationsbox aus.
  • Die folgenden vier Eigenschaften sind hier nur aus Gründen der Vollständigkeit aufgeführt, müssen aber denke ich nicht extra erklärt werden.
  • Mit "border-left: solid 10px #ddd;" definieren wir den Balken auf der linken Seite, welcher später die Farbe wechseln wird. Die hier angegebene Farbe sollte der Hintergrundfarbe für die Verweise entsprechen.

#navigation a:hover
{
 border-left: solid 10px #fc9;
}

  • Jetzt fehlt nur noch der "hover"-Effekt beim überfahren des Links mit der Maus. Diesen definieren wir genau hier. Wir geben einfach nur für "border-left" eine andere Farbe an "#fc9".

Hier das fertige Beispiel:

zur&uuml;ck nach oben

Beispiel 2 - ein farbiger Hintergrund:

Jetzt wollen wir beim überfahren mit der Maus den gesamten Hintergrund des Verweises wechseln. Dafür können wir das erste Beispiel fast vollständig übernehmen, lediglich im CSS müssen einige Änderungen erfolgen.

Das relevante CSS:

#navigation a:hover
{
 background-color: #999;
}

Wie man sehen kann ist das Austauschen der Hintergrundfarbe für den Hoover-Status des Verweises die einzige Änderung, die wir durchführen.

Hier das fertige Beispiel:

zur&uuml;ck nach oben

Beispiel 3 - ein grafischer Hintergrund:

In diesem Beispiel werden wir statt der verschiedenen Hintergrundfarben zwei unterschiedliche Hintergrundgrafiken verwenden.

Das relevante CSS:

#navigation a
{
 display: block;
 font-family: Taloma, Arial, Helvetica, serif;
 font-size: 0.8em;
 color: #fc0;
 background-color: #ddd;
 background-image: url(link_bg_1.png);
 padding-left: 20px;
}

und für den Hoover-Effekt:

#navigation a:hover
{
 background-image: url(link_bg_2.png);
}

Wir ergänzen das CSS für "#navigation a" und "#navigation a:hover" mit den Einträgen für die jeweiligen Hintergrundbilder.

Hier das fertige Beispiel:

zur&uuml;ck nach oben

Beispiel 4 - ein Button:

In diesem Beispiel werden wir den Verweistext komplett durch eine Grafik ersetzen und diese im Hover- Zustand austauschen.

(X)HTML:

<a id="link1" href="#" title="Dies ist nur ein Testlink">
 <img src="alt.gif" alt="Link 1" width="123" height="46" />
</a>
<a id="link2" href="#" title="Dies ist nur weiterer ein Testlink">
 <img src="alt.gif" alt="Link 2" width="123" height="46" />
</a>

  • Wir erzeugen ganz normale Verweise.
  • An Stelle des Linktextes übergeben wir ein transparentes Bild im Gif-Format. Dieses erfüllt 2 Zwecke:
    1. Es dient als Platzhalter für die spätere Hintergrundgrafik.
    2. Es gibt uns die Möglichkeit über das "alt" Attribut einen alternativen Verweistext anzugeben, für den Fall, dass der User einen Browser ohne Bilddarstellung einsetzt.

CSS:

a#link1
{
 background-image: url(button1_0.png);
 background-position: top;
 background-repeat: no-repeat;
 display: block;
 float: left;
}
a#link1:hover
{
 background-image: url(button1_1.png);
}
a#link2
{
 background-image: url(button2_0.png);
 background-position: top;
 background-repeat: no-repeat;
 display: block;
 float: left;
}
a#link2:hover
{
 background-image: url(button2_1.png);
}

  • Ich denke der CSS- Teil erklärt sich schon fast von alleine. Wir sezten für jeden der Verweise 2 Hintergrundgrafiken, einmal für den normalen und einmal Hoover- Status.

Und so sieht das fertige Beislpiel aus:

Anfang des Dokumentes