Tipps und Tricks: Hyperlinks mit Grafik
Links oder rechts eines Hyperlinks eine Grafik, wie z.B. einen Pfeil, anfügen,
kann interessant aussehen und der Übersicht helfen. Nur ist es recht aufwendig
immer ein
<img>-Element einzufügen. Besonders wenn sich die Grafik mal ändert.
Mit CSS kannst du diese Grafik als Hintergrund einfügen und dem Hyperlink somit
über einen class-Selektor Grafiken zuweisen.
,
,
,
,
<html>
<head>
<title>Hyperlinks mit Grafik</title>
<style type="text/css">
a.link {
background: url(../images/xnext.gif);
background-repeat: no-repeat;
background-position: right;
padding-right:14px;
}
</style>
</head>
<body>
<p style="line-height:140%;">
<a class="link" href="#">Hyperlink 1</a><br>
<a class="link" href="#">Hyperlink 2</a><br>
<a class="link" href="#">Hyperlink 3</a><br>
<a class="link" href="#">Hyperlink 4</a><br>
<a class="link" href="#">Hyperlink 5</a><br>
<a class="link" href="#">Hyperlink 6</a>
</p>
</body>
</html>
Dieses Beispiel legt für den class-Selektor
.link mit background-image eine
Hintergrundgrafik fest.
background-repeat sorgt dafür,
dass die Grafik nicht wiederholt, sondern nur einmal angezeigt wird und
background-position bestimmt die Position.
In diesem Fall soll es rechts sein. Damit nun der Text nicht über der Hintergrundgrafik
steht,
bestimmt padding-right:14px; einen Innenabstand
des Elementes auf der rechten Seite. Der gesamte Platz, den der Hyperlink auf
der
Seite
einnimmt, setzt sich aus dem Inhalt (in diesem Fall der Text) und dem Innenabstand
zusammen.
Die Hintergrundgrafik ist somit in dem freien Bereich zusehen, der vom Innenabstand
bestimmt wird. Hieraus folgt, dass du für padding mindestens die Breite der Grafik
angeben musst.
background ist eine Kurzform zur Angabe von Hintergrundeigenschaften.
Zusammengefasst würde die Zeile in diesem Beispiel so aussehen:
,
,
,
,
background: url(../images/xnext.gif) no-repeat right;
Browser
Der Opera kennt Hintergrundgrafiken für Inline-Elemente, wie
sie Hyperlinks z.B. sind, erst ab der Version 7. Besucher mit älteren Versionen sehen
keine Grafik neben den Hyperlinks. Da der prozentuale Anteil recht gering ist,
dürfte dies kein Problem sein.
Der Internet-Explorer kennt Innenabstände für
Inline-Elemente erst ab der Version 5.5.
Vorherige Versionen legen die Hintergrundgrafik unter den Text des Hyperlinks.
Du solltest dir dieses Feature also auf jeden Fall mit diesen Browsern ansehen und überlegen,
wie viele Besucher ältere Versionen verwenden und ob es für die zumutbar ist.