Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Ein Hyperlink, kurz: Link, ist ein Querverweis in einem Hypertext, der funktional einen Sprung zu einem anderen elektronischen Dokument oder an eine andere Stelle innerhalb eines Dokuments ermöglicht. Wenn der Hyperlink ausgeführt wird, wird automatisch das darin angegebene Ziel aufgerufen.
Quelle: Wikipedia CC-by-sa 3.0
Ich mag gern wissen, ob ein Link zu einer anderen Stelle innerhalb meines Webauftritts verweist, oder zu einer fremden Site. Deshalb kennzeichne ich Links zu fremden Seiten mit einem Icon.
Dies ist ein solchermaßen gekennzeichneter Demo-Link zu https://example.com.
Das Icon könnte man natürlich in jedem einzelnen Fall manuell in den Quellcode einfügen. Das ist aber
Daher füge ich das Icon per CSS ein:
a[href^='http']:not([href*='.deine_domain.de']){
background:url('pfad_zum_bild/icon.png') no-repeat;
padding-left:1em;
background-position-y: center;
background-size: 12px;
}
Die erste Zeile der CSS-Anweisung, der CSS-Selektor, wählt alle a-Tags mit einem href-Attribut, das mit http beginnt (^=), also sowohl http://… als auch https://…, außer (:not) sie beinhalten (*=) den String '.deine_domain.de'.
Ein nützlicher Nebeneffekt: Durch die Darstellung des Icons als background wird ein Zeilenumbruch zwischen Icon und Linktext zuverlässig verhindert, auch wenn der Linktext unglücklich am Zeilenende zu stehen kommt.
Beim Überfahren von externen Links mit der Maus wird ein Tooltip angezeigt: "externer Link …".
Blinden Screen-Reader-Nutzern wird vorgelesen: "externer Link" – wenn der Screen Reader entsprechend konfiguriert ist:
Unterstützung des Title-Attributs durch Screen Reader
Um den Tooltip zu erzeugen wird mittels JavaScript ein Title-Attribut eingefügt.
<script>
var lnk = document.links;
function links() {
for (i = 0; i < lnk.length; i++) {
if (lnk[i].href.indexOf(document.location.hostname) === -1 && lnk[i].href.indexOf("weisshart.de") === -1 ) {
lnk[i].title = "externer Link: " + lnk[i] + lnk[i].title;
}
}
}
window.onload=links;
</script>
Hinweis zum richtigen Aufruf von Funktionen – hier: "window.onload=links": JavaScript richtig aufrufen
Verlinkte Seiten öffnen sich normalerweise im gleichen Browsertab. Daran ändert die Kennzeichnung natürlich nichts. Wer Links in einem neuen Browsertab öffnen will, kann das zum Beispiel so: Klick mit der rechten Maustaste, und dann die entsprechende Auswahl treffen (z.B.: "Link in neuem Tab öffnen"). Oder die Strg-Taste beim Klick gedrückt halten (Mac: cmd-Taste).
Oder - exklusiv auf meinen Seiten – mit dieser Technik.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.