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.