Ob interne, oder externe Links – ob PDF oder Powerpoint – mit ein wenig JavaScript kann Verweis so gekennzeichnet werden, dass der Besucher weiß, was ihn erwartet, ohne erst auf einen Link klicken zu müssen.
Mit CSS2-Pseudoklassen ist es möglich, externe und interne Links zu unterscheiden, jedoch wird dies nicht von allen Browsern unterstützt. Mit Javascript ist dies aber auch möglich.
Das Document Object Model wird von allen gängigen Browsern unterstützt. Dabei kann man die einzelnen Elemente einer Seite über JavaScript ansprechen, sie verändern und dynamisch neue Elemente erzeugen. Für unseren kleinen Trick wollen wir darauf zurückgreifen; die JavaScript-Funktion, mit der die Dateiendungen der Links ermittelt wird, könnte wie folgt aussehen:
function linkIcon(){
var links = document.getElementsByTagName("a");
for (i=0; i<links.length; i++){
var images = links[i].getElementsByTagName("img");
// Keine verlinkte Bilder mit zusätzlichem Icon ausstatten
if (images.length == 0){
var linkHref = links[i].href;
if (linkHref.match(".rss")){
addIcon(links[i], "rss");
}
// PDF
else if (linkHref.match(".pdf")) {
addIcon(links[i], "pdf");
}
// Word Dokument
else if (linkHref.match(".doc")) {
addIcon(links[i], "doc");
}
//falls Dateiendung nicht vorhanden
else {
}
}
}
}
Über
document.getElementsByTagName(„a“)
werden alle Links auf der Seite ermittelt; sie können nun über das Array links angesprochen werden. Daraufhin werden die Links durchgeschleift;
über var images = links[i].getElementsByTagName(„img“);
wird ermittelt, ob es Bilder innerhalb der a-Tags gibt (das heißt, ob Bilder verlinkt sind). Ist dies nicht der Fall (if (images.length == 0)), so wird über linkHref.match() der Link nach den einzelnen Dateiendungen überprüft.
Daraufhin wird die Funktion addIcon aufgerufen. Ihr wird die Referenz auf den aktuell überprüften Link (links[i]) und die Dateiendung übergeben. Die Funktion addIcon könnte so aussehen:
function addIcon(selLink, ext) {
var img = document.createElement('img');
//diese Zeile müssen Sie anpassen
img.src = "http://ihrewebseite.de/images"+ext+".gif";
img.alt = "Dieser Link fü auf eine "+ext+" Datei.";
selLink.parentNode.insertBefore(img,selLink.nextSibling);
}
Mit document.createElement() wird ein Image-Element erzeugt. In der dritten Zeile wird die Adresse für die jeweiligen Icons generiert. Standardmäßig heißen die Dateien zum Beispiel rss.gif für ein RSS-Icon. In der letzten Zeile wird dafür gesorgt, dass das Icon auch nach dem Link angezeigt wird.
Um die Funktion aufzurufen, bedarf es eines onLoad-Events im body-Tag. Dieser könnte wie folgt aussehen:
<body onLoad="linkIcon()">
<a href="javascript: linkIcon()">Links markieren</a>
Externe Links markieren
Um externe Links zu markieren, kann man auf dieselbe Weise vorgehen. Man muss lediglich in der Funktion linkIcon einen weiteren else if-Zweig hinzufügen:
//für externe Links, die nicht auf ihren Server verweisen
else if (!linkHref.match("ihreseite.de")) {
addIcon(links[i], "extern");
}
Gekennzeichnete Links
Erstveröffentlichung 05.09.2005
