Ausgehende Links mit Icon kennzeichnen

Webdesigner lieben CSS, da es sehr individuell genutzt werden kann. Und die Kinderkrankheiten der alten Browser sind teilweise Geschichte.
In diesem Tutorial geht es um ausgehende Links, also die mit dem target _blank Attribut. Diese sollen ein eigenes Bild-Icon erhalten.

Warum ausgehende Links kennzeichnen?


Die Usability wird groß geschrieben - klar. Die Benutzerfreundlichkeit hat einen gewissen Standard erreicht und verschiedene Nutzungseigenschaften sind in den Köpfen der Besucher. So wie ein X das Schließen eines Fensters/Layers bedeutet, so sind Links meist unterstrichen. Bei der zunehmenden mobilen Nutzung werden Standards auch immer wichtiger.

Links, also Verweise, unterliegen ebenfalls einigen Regeln. Interne Links öffnen im gleichen Fenster-Tab. Ausgehende Links sollten in einem neuen Fenster-Tab öffnen. Dies ist zwar eine Regel unter Webdesigner/Webmaster, aber kein Gesetz. Viele nutzen ausgehende Links ohne das Attribut target="_blank".

Der Browser selbst nutzt kein differenziertes Styling für ausgehende (_blank) oder Links im selben Ort (keine Angabe oder _self).

Mit CSS können wir das aber selbst bestimmen.

Ziel des Tutorials:

ausgehenden target blank Link mit Icon

ausgehenden target blank Link mit Icon


Das wird benötigt:
Du benötigst ein Bild z.B. in Form eines Pfeiles. Idealerweise hat dieses eine transparente Fläche.

Gern darfst du das gezeigte Pfeil-Bild von mir für deine Webseite nutzen. Es ist ein .PNG im Abmaß von 10×10 Pixel und etwa 277 Bytes groß. Der Hintergrund ist transparent.

blank PNG Icon:


Das Bild wurde zum einfachen kopieren nur hier im Text vergrößert. Gespeichert ist es jedoch 10x10 Pixel groß, wie im ganz oberen Beispielbild gezeigt.
Zum speichern: Rechtsklick -> kopieren / speichern unter

HTML & CSS Code für den ausgehenden Link

Nachfolgend der HTML und CSS Code dieses Tutorials.

HTML Link mit target blank:

<a href="" title="Linkname (neuer Tab)" target="_blank">Ein ausgehender Link</a>


Erläuterungen zum Code:
Der HTML Code ist abgespeckt und enthält neben einem Titel, welcher beim Maus-Hover sichtbar wird, auch die wichtige Target-Angabe. Diese bestimmt, in welchem Fenster-Tab, Frame oder Popup der Link geöffnet werden soll. In unserem Fall _blank für das neue Tab-Fenster.

Wissenswertes:
Alte Browser ohne Tab-Unterstützung, öffnen ein neues Browserfenster. Smartphones sollten alle Tabs unterstützen.
CSS Code mit dem Bild für ausgehende Links

CSS Code ausgehender Link:

a{	color: #2674BC;}a:hover{	color: #404040;}a[target="_blank"]{	padding-right: 12px;	background-image: url('blank.png');	background-repeat: no-repeat;	background-position: right;}


Erläuterungen zum Code:
a bestimmt die Eigenschaften des HTML a-Tags, unserem Link.
a:hover bestimmt den Hover-Effekt beim überfahren mit dem Mauspfeil.
a[target="_blank"] ist die wichtige Eigenschaft, welche unser Bild mit dem Pfeil am Linkende einfügt.

Das Bild wird in diesem Beispiel am selben Ort gespeichert.

Kompletter Code zum Link-Tutorial:


Nachfolgend der Code zum einfachen kopieren.

Kompletter Code zum kopieren
<html><head>	<style type="text/css">a{	color: #2674BC;}a:hover{	color: #404040;}a[target="_blank"]{	padding-right: 12px;	background-image: url('blank.png');	background-repeat: no-repeat;	background-position: right;}</style></head><body>	<a href="" title="Linkname (neuer Tab)" target="_blank">Ein ausgehender Link</a></body></html>


Fazit


Hat dir dieses Tutorial gefallen? Dann teilen und kommentieren! Vielleicht hast du auch etwas anderes erwartet und nicht auf Webmaster-Glossar gefunden? Dann hinterlasse deine Wünsche und Meinung.