Markup

Iconifiziert: Textlinks, CSS und Bildchen

Der CSS-Guy hat uns vor einiger Zeit gezeigt, wie man mit ein wenig CSS verschiedene Links unterscheidbar machen kann. In einer Erweiterung seiner Technik nutzt er JavaScript zur automatischen Erkennung des Favicons.

Poolie Studios (Alexander Kaiser) hat die erste Idee aufgegriffen und für die üblichen Verdächtigen eine kleine Sammlung erstellt: Iconize Textlinks with CSS. Das Ganze (CSS und Grafiken) ist als kostenloser Download verfügbar und kann mit einem Fingerschnippsen wenigen Handgriffen in die eigene Website eingebaut werden.

Per CSS Hyperlinks mit Grafiken versehen

Leider ist die verwendete Technik nur für Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & Internet Explorer 7 ausgereift. Der IE6 (und älter) macht uns wieder einen Strich durch die Rechnung.

Per CSS Hyperlinks für den IE6 mit Grafiken versehen Wer es aber auch für ältere Browser anzeigen lassen möchte, der kann natürlich Klassen verwenden, z.B. für einen Hyperlink auf eine E-Mailadresse:

/* HTML */
<a href="mailto:ich@domain.de" class="mailto">mailto:</a>

/* CSS */
a.mailto {
	padding-right: 20px;
	background: transparent url(icons/icon_mailto.gif)
		no-repeat center right;
}

Wer weder dieses Markup scheut noch an eine Weltherrschaft des Internet Explorers 7 glaubt, der fährt damit sicher ganz gut.

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

1 Kommentare

  1. Super – genau sowas hab ich schon seit langen für diese ganzen Bookmarkdienstbildchen gesucht. Damit lässt sich das ja richtig easy implementieren. Danke !

Kommentare sind geschlossen.