Hier bist Du: Home « Tipps und Tricks « Hyperlinks mit wechselnden Hintergrundbildern

Tipps und Tricks: Hyperlinks mit wechselnden Hintergrundbildern

Beispiel

Mit hover kannst du auch das Hintergrundbild eines Hyperlinks verändern. Damit kannst du auf die üblichen Grafiklinks mit Javascript verzichten.

Internet Explorer 5.x, Netscape 6.x, Opera 7.0, Mozilla 1.0, Mozilla Firefox 0.8
<html>
<head>
<title>Hyperlinks als Block-Elemente</title>
<style type="text/css">
a.link {
display:block;
width:250px;
height:50px;
border:1px solid #000000;
background-image:url(../images/nc7gr.gif);
}

a.link:hover {
background-image:url(../images/iegr.gif);
}

</style>
</head>
<body>

<a class="link" href="#"> </a>

</body>
</html>

Dieses Beispiel legt für den class-Selektor .link Hintergrundbild, Rahmen, Breite und Höhe fest und display:block deklariert alle Elemente mit diesem Selektor als Block-Element. Die haben den Vorteil, dass man für sie auch Breite und Höhe angeben kann, sodass alle Links gleiche Abmessungen haben, unabhängig, wie lang der Text ist.
Die Zeile a.link:hover{... legt für den Hover-Effekt ein anderes Hintergrundbild fest.

Browser

Für Browser, wie der Opera 5 + 6, die diesen Trick nicht unterstützen, kannst du zusätzlich die Hintergrundfarbe verändern, sodass diese Browser einen eigenen Hover-Effekt anzeigen. Der Netscape 4 kennt hover und Hyperlinks als Block-Elemente nicht. Berücksichtigst du diesen Browser noch auf deiner Seite, solltest du diesen Trick nicht anwenden.