Link-Text durch Grafik ersetzen

Möchte man in einem vorgegebenen Link den Text unsichtbar machen und durch ein Hintergrundbild ersetzen, so ist das Erste was einem einfällt color: transparent; für die Linkfarbe. Leider ist diese Eigenschaft nicht spezifiziert in CSS 2.1.

Trotzdem möchte ich eine Möglichkeit zeigen, die nach CSS 2.1 gültig ist und im Internet Explorer 6-8 sowie im Mozilla Firefox funktioniert.

Einfache Lösung

HTML-Element:

<ul>
	<li>
		<a href="..">Link</a>
	</li>
</ul>

CSS-Formatierung:

ul li a
{
	display: block;
	overflow: hidden;
	width: 0;
	padding-left: 146px;
	height: 217px;
	background-image: url(./grafik/hintergrund.png);
}

Der Trick daran ist, dass durch width: 0; der Link unsichtbar wird aber durch padding-left: 146px; die Breite erreicht wird, die das Hintergrundbild benötigt. Die Eigenschaft height: 217px; legt die Höhe des Hintergrundbildes fest. Mit display:block; und overflow: hidden; wird es dann möglich, dass ein blockartiges Hintergrundbild als Linktext-Ersatz verwenden werden kann.

Browserkompatible Lösung

Im Apple Safari funktioniert der oben genannte Trick leider nicht, deshalb muss man einen anderen Weg gehen. Hier bietet es sich an, den Linktext in einem span-Element unterzubringen und das span-Element dann nicht anzuzeigen.

HTML-Element:

<ul>
	<li>
		<a href=".."><span>Link</span></a>
	</li>
</ul>

CSS-Formatierung:

ul li a
{
	display: block;
	overflow: hidden;
	width: 0;
	padding-left: 146px;
	height: 217px;
	background-image: url(./grafik/hintergrund.png);
}
 
span
{
	display: none;
}

2 Gedanken zu „Link-Text durch Grafik ersetzen“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.