Hintergrund verlinken
Nach obenEinführung
Manchmal ist es sinnvoll mit einem kleinen Trick den Hintergrund zu verlinken. Dies ist vor allem dann hilfreich, wenn man ein Menü hat, dass aus Bildern besteht. Natürlich könnte man ganz einfach die Bilder via HTML einfügen und verlinken, wenn man allerdings mit CSS noch einen Hover-Effekt einrichten will, wird einem diese Methode Schwierigkeiten bereiten.
Nach obenLösung
Eine Lösung ist, den Text zu verlinken, diesen aber nicht anzuzeigen. Dazu wird der Text in einem <span> ausgeben, das das Attribut display:none; hat, also nicht angezeigt wird.
#button span {
display: none;
}
Der Text des formatierten span-Elements muss jetzt nur noch verlinkt werden:
<div id="button">
<a href="#"><span>dieser Text wird nicht angezeigt.</span></a>
</div>
Jetzt haben wir den Link, allerdings wollten wir ja auch einen Hintergrund, der als Button fungieren soll.
#button a{
width: 91px; /*Breite des Buttons*/
height: 22px; /*Höhe des Buttons */
background: url(images/button.jpg);
}
Nun ist der HIntergrund verlinkt; will man jetzt noch einen Hover-Effekt hinzufügen, muss man einfach wie gehabt bei a:hover den Hintergrund ändern.
}
#button a:hover{
width: 91px;
height: 22px;
background: url(images/button _over.jpg);
}
Nach obenZusammenfassung
Nochmal den Code in der Zusammenfassung
#button span {
display: none;
}
#button a{
width: 91px;
height: 22px;
background: url(images/button.jpg);
}
#button a:hover{
width: 91px;
height: 22px;
background: url(images/button _over.jpg);
}
<div id="button">
<a href="#"><span>dieser Text wird nicht angezeigt.</span></a>
</div>
werbegeschenk
So wird das in einigen Browsern nicht funktionieren - bspw. im Firefox:
width: und height: funktionieren für ein Inline-Element hier nur im Zusammenhang mit display:block;
Du solltest dem a-Element also noch ein display:block hinzufügen.
Das div ist eigentlich überflüssiger Balast.
Das ganze hat noch einen Schönheitsfehler:
Deaktiviere ich in meinem Browser das laden von Bildern sehe ich leider garnichts.
schmichl
besser man verschiebt den text mit text-indent:-9999px;, das ist besser für screenreader und überhaupt barrierefreier.
schaut euch das mal an: www.byteshift.de
fphilipe
das html könnte einfach nur aus dem link bestehen:
<a href="#" id="button">Button</a>
und dann noch das css:
#button {
width: 91px;
height: 22px;
background: url(images/button.jpg);
letter-spacing: -9999px;
text-indent: -9999px;
}
#button:hover{
width: 91px;
height: 22px;
background: url(images/button _over.jpg);
}