Jak wyróżnić linki z rozszerzeniami typu PDF czy DOC?

W tym tipsie pokażemy, jak za pomocą JavaScriptu i CSS wzbogacić stronę internetową o specjalne "metki" przy linkach, sugerujące ich zawartość, jeśli będą to pliki typu PDF, DOC lub ZIP, ale nie tylko.

Skrypt doda atrybut target do wszystkich URL-i, które mają w sobie '.pdf' lub do każdego innego rozszerzenia, które chcemy wyróżnić na stronie. Skrypt dodaje również klasę class="pdfLink" do wszystkich linków, które spełniają kryteria. To samo może zostać zrobione względem plików DOC czy ZIP.

function fileLinks() {var fileLink;
if (document.getElementsByTagName('a')) {for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
if (fileLink.href.indexOf('.pdf') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'pdfLink';
}
if (fileLink.href.indexOf('.doc') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'docLink';
}
if (fileLink.href.indexOf('.zip') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'zipLink';
}
}
}
}
window.onload = function() {
fileLinks();
}

Teraz posiadając już klasy pdfLink, docLink oraz zipLink możemy za pomocą CSS ustylizować metki, które będą pojawiać się przy linkach. Przypiszemy do tych klas odpowiednie ikonki:

.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

Proponujemy użyć małych ikonek, które nie będą odciągać uwagi od samej treści i nie popsują szyku samego dokumentu.