Die Datenreisenden – Neues aus dem Web

Externe Links kennzeichen auf die leichte Art: Mit Zuhilfenahme von JavaScript. Erweitert einen Dr. Web-Artikel zum selben Thema.

Vor ein paar Monaten bin ich bereits schon einmal der Frage nachgegangen, wie man externe Links in normalen HTML-Texten besser erkennbar machen kann. Bei meinen Recherchen bin ich dabei u.a. auf die exzellenten Artikel vom Dr. Web Magazin gestoßen. Ein weiterer dieser Artikel, der mir erst später aufgefallen ist, speziell weil aus dem Titel nicht klar hervorgeht, auf was sich der Titel bezieht (Javascript-basierte Links kennzeichen, Links, die JavaScript enthalten oder mittels Javascript bestimmte Links visuell hervorheben?).

Unerheblich davon habe ich nun endlich die darin angesprochenen Javascript-Kniffe angewandt und gleich noch einen weiteren hinzugefügt: Ich wollte, dass externe Links bei mir zusätzlich noch mit einem title-attribut ausgezeichnet werden, damit beim Überfahren des Linktexts mit dem Mauscursor ein entspr. kleines Tooltip erscheint (Inhalt: “externer Link: http://somedomain.com”).

Gesagt, getan, und mit ein bisschen Herumprobieren und Nachlesen der benötigten Befehle in SelfHTML habe ich dann folgende Funktion hinzufügen können:


function addTitle(selLink) {
  var selTitle = document.createAttribute("title");
  selTitle.nodeValue = "externer Link: " + selLink;
  selLink.setAttributeNode(selTitle);
}


Meine Variation des Original-Quellcodes sieht dementsprechend anders aus:


if (!linkHref.match("f2w.de") && !linkHref.match("weblog-hosting.net") && linkHref.match("http://")) {
  // für externe Links, die nicht auf ihren Server verweisen
  addIcon(links[i], "extern2");
  addTitle(links[i]);
}


Erläuterungen:
Die Funktion addTitle() fügt automatisch dem gerade aktuellen Link (in der for-next-Schleife) ein entsprechendes title-Attribut zu.
f2w.de und weblog-hosting.net gelten beide als interne Links, desweiteren macht es mehr Sinn, wenn nur Links, die auch tatsächlich ein http:// enthalten, in die Abfrage miteinbezogen werden.