22.11.2008
Externe Links hervorheben
Dem Besucher kann es nützlich sein, wenn er externe Links auf einer Homepage auch als solche erkennt. Er könnte sich dann z.B. entscheiden, externe Links in einem neuen Fenster zu öffnen.
Sinnvoll ist es in diesem Fall, die externen Links mit einem entsprechenden Icon zu kennzeichnen, z.B. mit diesem: 
Derartige Icons gibt es zum kostenlosen Download wie z.B. bei Dr. Web.
Um externe Links besonders zu kennzeichnen seien hier zwei Methoden vorgestellt:
1. Externe Links per CSS-Klasse kennzeichnen
Recht einfach und universell einsetzbar ist die Zuweisung einer besonderen Link-Klasse, wie bereits in dieser Anleitung beschrieben.
Zu diesem Zweck wird das Icon dem Link als Hintergrundgrafik zugewiesen und rechts oben positioniert. Es ist ferner sicherzustellen, dass es sich nicht wiederholt (kachelt). Um etwas Abstand zum Linktext zu erhalten, wird noch ein padding-right-Wert benötigt. Somit sind folgende CSS-Angaben erforderlich:
.extern {
background-image: url(link.png);
background-position: top right;
background-repeat: no-repeat;
padding-right: 12px;
.extern {
background: url(link.png) top right no-repeat;
padding-right: 12px;
}
<a href="http://www.gehts-gar.net" class="extern">Externer Link zu "gehts-gar.net"</a>
Dieser Link sieht dann so aus: Externer Link zu "gehts-gar.net"
Diese Methode funktioniert in allen Browsern einwandfrei. Dennoch ist sie etwas umständlich, weil man bei jedem externen Link daran denken muss, die spezielle Klasse "extern" zuzuweisen. Ist dem a-Element bereits eine andere Hintergrundgrafik zugewiesen, dann kommt es zu einem Konflikt, weil ein Element jeweils nur eine Hintergrundgrafik haben darf.
Deshalb wollen wir uns noch eine weitere, weitaus elegantere Möglichkeit ansehen:
2. Definition per Attributselektor und Zeichenketten
Im Vorgriff auf den künftigen "CSS 3-Standard" kann auf ein Element zugegriffen werden, indem man einen Teil seines Attributwerts mit einem entsprechenden Text vergleicht. In diesem Fall werden die hinterlegten CSS-Eigenschaften sämtlichen Links zugewiesen, welche mit der Zeichenkette http beginnen.
Die dazu erforderliche CSS-Angabe lautet wie folgt:
a[href^="http:"] {
background: url(link.png) top right no-repeat;
padding-right: 12px;
}
Im HTML-Teil reicht nun ein ganz "normaler" Link ohne Klassenzuweisung:
<a href="http://www.ohne-pi.gehts-gar.net">PhotoImpact-Kurs</a>
Ergebnis:
Externer Link zu meiner Partnerseite PhotoImpact-Kurs, wo ihr übrigens einen guten Einstieg in diese Bilbearbeitungssoftware bekommt und dazu natürlich auch viele nützliche Tipps und Tricks.
Mit dieser Methode erübrigt sich eine gesonderte Klassenzuweisung, weil anhand der Zeichenfolge "http" automatisch erkannt wird, dass es sich um einen externen Link handelt. Das setzt natürlich voraus, dass sämtliche internen Links mit relativen und nicht mit absoluten URL-Pfaden gesetzt werden. Aber auch dazu gibt es eine Lösung: Genauso, wie externe Links über "http" erkannt werden, kann natürlich auch die eigene Seite anhand ihrer Zeichenfolge identifiziert werden. Um zu vermeiden, dass absolut gesetzte, interne Links als externe Links interpretiert werden, setzt man die vorherigen Definitionen wie folgt zurück:
a[href^="http://www.meineseite.de"], a[href^="http://meineseite.de"] {
background-image: none;
padding-right: 0;
}
Durch background-image: none; wird somit den absoluten Links zur eigenen Seite kein Icon zugewiesen.
Mit der beschriebenen Methode können auch eMail-Verknüpfungen hervorgehoben und mit einem Icon versehen werden. Hier orientiert sich die Zuweisung an der Zeichenfolge mailto:
a[href^="mailto:"] {
background: url(mail.png) top right no-repeat;
padding-right: 12px;
}
Hinweis:
Es sei darauf hingewiesen, dass diese Methode noch nicht dem offiziellem CSS-Standard entspricht. Sie wird jedoch bereits von vielen modernen Browsern unterstützt. Von älteren Browsern (darunter die Internet Explorer Versionen bis einschließlich IE 6) wird die Attributselektor-/ Zeichenfolgemethode ignoriert, d.h., die Icons werden dann eben nicht angezeigt.
Quelle:
Die Idee zu dieser Anleitung stammt aus dem Buch CSS Mastery: Webdesign für Fortgeschrittene