Tipps und Tricks: Hyperlinks mit wechselnden Hintergrundbildern
Mit hover kannst du auch das Hintergrundbild eines Hyperlinks verändern. Damit kannst du auf die üblichen Grafiklinks mit Javascript verzichten.
,
,
,
,
<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.