Viele Seiten zeigen hinter einem Extenen Link ein kleines Icon an damit der Besucher erkennt das es sich bei dem Link um einen Link zu einer externen Seite handelt. Ich habe das ganze mal etwas erweitert so, dass sich das Icon wenn man mit der Maus über den Link fährt in das Logo der Seite ändert. So sieht ein Besucher nicht nur das es sich um einen Externen Link handelt sondern auch wo hin der Link geht. Das alles funktioniert ohne das man das HTML seiner Seite ändern muss.
Um das umzusetzen gibt es zwei Möglichkeiten, je nach schon vorhandener Konfiguration der Webseite eignet sich die eine oder andere Möglichkeit besser um den Effekt zu erreichen.
Möglichkeit 1 mit reinem CSS
Als erstes muss man allen Links ein Icon verpassen das man dann für alle lokalen Links wieder entfernt. Dazu gibt man einfach allen Tags deren href Attribut mit http: oder https: beginnt ein Hintergrundbild das man ganz ans Ende schiebt. Dann entfernt man das Bild wieder für alle Links die auf die eigene Domain gehen.
a[href^='http:'],a[href^='https:'] {
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAAZklEQVQokcXQsQ2DUAyE4Q/EPpSIjlRkgGQaBqMDVsg+FDQhssjTo0L8lW3d2SdzNUWo51A/0GFAFWa/Jgp3FjR4RkGZuf5CjxFrShAj1Zjw/vbtmWE3/ZGL9EktyxmSHL90jHUDG8xlC1WZ/143AAAAAElFTkSuQmCC') 100% 50% no-repeat;
padding-right:16px;
}
a[href^='https://tas2580.net'] {
background:transparent;padding-right:0;
}
Hier muss die Domain durch die eigene Domain ausgetauscht werden.
Icons definieren
Im nächsten Schritt kann man dann für einzelne Domains das Icon austauschen wenn ein Besucher mit der Maus über den Link fährt.
a[href*="//www.facebook.com"]:hover {
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAMFBMVEU7V53///83S404UZXo6/N9kL19irX6+/3u8ffW3OrS1+fL0+bEzN+8xd5XbqxMXpqWgaMYAAAAM0lEQVQI12NIUgICNQYDBiBgBhGvaxlAYKIMmBL8DKHApKOgBISSAlFKgspQOTgVAKJYAUmYBiIRvNnNAAAAAElFTkSuQmCC') 100% 50% no-repeat;
}
Für jede Domain die ihr eigenes Icon bekommen soll muss ein solcher Eintrag gemacht werden. Falls man die Icons immer austauschen will und nicht nur beim überfahren mit der Maus kann man einfach das :hover weg lassen.
Der Vorteil der Methode ist das man kein JavaScript dazu benötigt und das alles recht klein bleibt wenn man nicht zu viele Domains definieren möchte. Außerdem kann man beliebige Domains definieren und für jede Domain ein beliebiges Icon benutzen. Wenn man den Effekt für sehr viele Domains nutzen möchte wird das CSS allerdings schnell sehr groß.
Das ganze kann man sich hier als Demo anschauen.
Möglichkeit 2 mit JQuery und Fontawesome
Wenn man Font Awesome und JQuery auf seiner Seite schon einsetzt kann man auch das nutzen um den Effekt zu erreichen, so spart man sich einiges an CSS da man die Icons aus Font Awesome nutzen kann und so das CSS schön klein bleibt.
Benötigte Ressourcen einbinden
Wenn man JQuery und Font Awesome nicht eh schon in seiner Webseite verwendet muss man es einbinden. Dazu lädt man sich hier Font Awesome runter und bindet es im seiner Seite ein.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Jetzt benötigt man noch JQuery das man ohne es runter zu laden über ein CDN einbinden kann, am besten bindet man es am Ende der Seite vor dem schließenden Tag ein.
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
Webseite anpassen
Damit der Text später nicht springt wenn man mit der Maus über einen Link fährt sollte man hinter jeden externen Link ein kleines Icon anhängen das dem Besucher zeigt das es sich bei dem Link um einen Link auf eine externe Seite handelt. Wichtig ist das man den Code hinter JQuery einbaut.
<script type="text/javascript"> $(document).ready(function() { $('a').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass('extlink'); }); </script>
Das Script verpasst allen externen Links die CSS-Klasse extlink die man dann in seiner CSS Datei definieren kann. Hier kann man alternativ natürlich auch die Lösung von oben verwenden wenn man ohne JavaScript auskommen möchte. Ich wollte aber einfach mal einen alternativen Weg zeigen der auch den Vorteil hat das er unabhängig von der Domain auf der die Webseite läuft ist.
a.extlink::after{
font-family:"FontAwesome";
content:"\f08e";
font-size:.7em;
display:inline-block;
color:#000;
position: relative;
bottom:2px;
width: 14px;
height:12px;
text-align: center;
}
Jetzt kann man für einzelne Domains das Icon austauschen, das funktioniert leider nur mit Seiten für die Font Awesome ein Icon bereit stellt.
a[href*="//www.amazon."]:hover::after{content:"\f270";font-size:1em;color:#F8A51B}
a[href*="//codepen.io"]:hover::after{content:"\f1cb";font-size:1em;}
a[href*="//www.dropbox.com"]:hover::after{content:"\f16b";font-size:1em;color:#007EE4}
a[href*="//www.facebook.com"]:hover::after{content:"\f230";font-size:1em;color:#3B5998}
a[href*="//github.com"]:hover::after{content:"\f113";font-size:1em;}
a[href*="//www.google."]:hover::after{content:"\f1a0";font-size:1em;color:#E33E2B}
a[href*="//jsfiddle.net"]:hover::after{content:"\f1cc";font-size:1em;color:#1C90F3}
a[href*=".linkedin.com"]:hover::after{content:"\f0e1";font-size:1em;color:#0075B2}
a[href*="//www.paypal.com"]:hover::after{content:"\f1ed";font-size:1em;color:#123986}
a[href*=".pinterest.com"]:hover::after{content:"\f231";font-size:1em;color:#BD081C}
a[href*="//stackoverflow.com"]:hover::after{content:"\f16c";font-size:1em;}
a[href*="snapchat.com"]:hover::after{content:"\f2ac";font-size:1em;color:#FFFC00}
a[href*="//soundcloud.com"]:hover::after{content:"\f1be";font-size:1em;color:#FF6A22}
a[href*="//store.steampowered.com"]:hover::after{content:"\f1b6";font-size:1em;}
a[href*="//twitter.com"]:hover::after{content:"\f099";font-size:1em;color:#3B94D9}
a[href*=".wikipedia.org"]:hover::after{content:"\f266";font-size:1em;}
a[href*=".wordpress.org"]:hover::after{content:"\f19a";font-size:1em;color:#21759A}
a[href*="//www.youtube.com"]:hover::after{content:"\f167";font-size:1em;color:#CC181E}
Die Methode hat den Vorteil das man mit wenig Code den Effekt erreichen kann und das CSS nicht übermäßig aufgebläht wird. Der Nachteil ist allerdings das man nur Icons verwenden kann die in Font Awesome enthalten sind und man die Icons nur einfarbig einfärben kann.
Kommentare