Externe Links als solche kennzeichnen – Mit JavaScript und CSS

5 Januar 2015 · Kategorie: HTML + CSS · 5 Kommentare

„Verwirre den User…NICHT!“ So oder so ähnlich lautet einer der obersten Grundsätze des User Interface Designs. Wir sind Gewohnheitstiere. Wir wollen das etwas so funktioniert wie es das schon immer getan hat. Bei den meisten UI Elementen ist das relativ klar. Gerade jedoch ein einfacher externer Link kann da Überraschungen bergen. Klickt man drauf kann man entweder auf einer gänzlich anderen Internetseite landen, oder innerhalb der gerade besuchten Domäne hin und her springen. Was genau passiert weiß man erst hinterher.

Um eben diese Verwirrung des Users zu vermeiden gehen viele Seitenbetreiber den Weg, einen externen Link eben auch als solchen zu kennzeichnen. Zum Beispiel mit einem kleinen Icon dahinter.

Auf meiner Seite sehen externe Links z.B. so aus:
Link auf eine externe Seite

Interne Links sehen dahingegen ganz normal aus:
Link auf eine interne Seite

Externe Links mit eigener CSS Klasse auszeichnen

Mit einem einfachen JavaScript, eingebunden in den Footer oder Header Bereich eurer Seite, könnt ihr sehr einfach einem externen Link eine eigenen Klasse zuweisen und dann per CSS individuell gestalten.
Mit diesem Script:

<script>
$(function(){
var externallink = $('a[href]').filter(function(){
return this.hostname != location.hostname;
});
externallink.addClass('external-link');
});</script>

wir festgestellt ob ein Link Element auf eine URL innerhalb des eigenen Hostnamens verweist oder nicht. Im zweiten Fall wird die Klasse class="external-link" an das Link Element angehängt.
Diese Klasse läßt sich dann individuell per CSS stylen.

Den Link per CSS individualisieren

Jetzt kann man externen Links einfach per CSS ein anderes Aussehen als internen Links verpassen:

.external-link{
/* adding styles here*/
}

In meinem Fall habe ich beispielsweise ein Icon aus dem Font Awesome Font Icon Set (<- Ja genau, ein externer Link…) hinter den entsprechenden Links mit dieser CSS Klasse platziert:

/* Externer Link mit Font Awesome Icon dahinter */
.external-link:after {
font-size:.75em;
color:#666;padding-left:4px;
font-family: 'FontAwesome';
content: "\f08e";
}

Aber vorsicht: JEDER externe Link wird mit dem oben genannten Code ausgezeichnen und „ge-stylt“. Ggf. kann es sinnvoll sein nur externe Links in einem entsprechenden Bereich zu gestalten. In meinem Fall wurden zunächst auch die kleinen Social Media Icons oben rechts neben dem Logo dieser Seite mit einem entsprechenden Icon versehen. Und ein Iocn neben einem Icon war natürlich nicht Sinn der Sache

Bisherige Kommentare (Selber ein Kommentar hinterlassen)

  • Holger sagt:

    Ja, das dürfte das Problem sein. Bei Font Awesome handelt es sich um Font Icons. Die mußt du in deine Seite einbinden.
    Pack einfach das hier:

    vor den schließenden Tag.
    Dann wird die Datei nicht lokal geladen sondern von einem CDN. Mußt also sonst nichts weiter machen.
    Die Anleitung gibts hier: http://fortawesome.github.io/Font-Awesome/get-started/

  • gregor sagt:

    Eine Url kann ich leider nicht posten, weil ich das in meiner WordPress-Testumgebung ausprobiert habe. Nutzen möchte ich es auf meinen Seite http://gregorselle.de und http://www.nollendorfkiez.de
    Ich hatte mir von der Webseite die Datei font-awesome-4.3.0.zip gedownloadet und habe die Datei entpackt. Vielleicht habe ich den Ordner dann falsch übertragen. Ich hatte den in den Theme-Ordner kopiert. Vielleicht ist das der Fehler gewesen.
    Die Nutzung der Icons kann ja eigentlich nicht so schwierig sein. Ich denke, mein Problem ist die korrekte Installation der Font Awesome. Bei der Webseite http://www.nollendorfkiez.de möchte ich künftig das Theme „Make“ nutzen, das teste ich gerade in meiner Testumgebung,

  • Holger sagt:

    Ach ja und du mußt natürlich die entsprechende Icon Font eingebunden haben. In meinem Beispiel „Font Awesome“…oder der Klasse .external-link:after eben irgendwas anderes (Farbe, Grösse was auch immer) zuweisen. Geht in meinem Tutorial nicht so sehr darum WIE man dann letzlich ein externen Link „schmückt“, mehr darum DAS man ihn mit einer extra Klasse auszeichnen kann.

  • Holger sagt:

    Vielleicht geht da was mit dem JavaScript und anderen JS auf deiner Seite durcheinander…kannst du deine URL posten?

  • gregor sagt:

    Bei mir klappt das leider irgendwie nicht. Hab mich genau an die Anleitung gehalten, aber nach dem externen Links ist leider kein Icon zu sehen :-/


Kommentar schreiben (* Pflichtfelder)