hover bei Links mit Bildern

Immer wieder kommt von Anfängern im Webmastering die Frage: "Wie mache ich es, das wenn ich in meiner Navigation mit der Maus über ein Bild fahre, ein anderes Bild angezeigt wird?"

Auf diese Frage gibt es mehrere Antworten. Die gebräuchlichste Methode ist wohl die, die Bilder als Hintergrund anzuzeigen und mit der Pseudoklasse :hover zu wechseln. Da in meinen Augen Hintergrundbilder nicht flexibel genug zu handhaben sind, stelle hier mal eine andere Methode vor.

Mit den rechts gezeigten zwei Beispielbildern zeige ich eine Bildwechsel-Möglichkeit in einer Navigation, die mit einer Liste ausgezeichnet ist.

Um den unten gezeigten Effekt zu bekommen ist kein großer Aufwand notwendig. Dazu erstelle ich zuerst eine Liste, die bei jedem Link beide Bilder beinhaltet. Die einzelnen Bilder bekommen eigene Klassen, je eine für die "normale" Anzeige und eine für den hover-Effekt.



Der Quelltext meines Beispieles sieht so aus:

html:

<ul class="link">
  <li><a href="#" >
    <img src="images/button-link.png" class="keinhover" alt="" />
    <img src="images/button-link-hover.png" class="mithover" alt="" />
    <span>Link Nr. 1</span>
  </a></li>
</ul>

(In dem links zu sehenden Beispiel habe ich lediglich drei identische Listenpunkte zur Demonstration eingefügt.)

Der Linktext "Link Nr. 1" ist nur für Suchmaschinen eingefügt und wird per css aus dem sichtbaren Bereich geschoben.

Das Ein- und Ausblenden der Bilder geschieht ausschliesslich per css. Der Code sieht so aus:

css:

Erklärung:

.link {...}

Hier werden allgemeine Abstände und der Listenstil formatiert.



.link a span {...}

Der Linktext wird aus dem sichtbaren Bereich geschoben.



.link a img.mithover {...}

Die Anzeige des hover-Bildes wird für den "normal-Modus" unterbunden.



.link a:hover img.mithover {...}

Beim Überfahren des Links mit der Maus wird das hover-Bild angezeigt.



.link a:hover img.keinhover {...}

Das Bild für den "normal-Modus" wird beim Überfahren des Links ausgeblendet.



.link {
margin:0;
padding:0;
list-style: none;
}
.link a span {
margin-left: -999em;
}
.link a img.mithover {
display:none;
}
.link a:hover img.mithover {
display:inline;
}
.link a:hover img.keinhover {
display:none;
}

Ich hoffe, das ich mich allgemeinverständlich ausgedrückt habe. Sollte jemand Fehler entdecken oder weitere Anregungen haben, bitte ich um eine kurze Info über mein Kontaktformular.

zur Webmastering-Hauptseite