Automatiska ikoner på länkar med jQuery


Att manuellt lägga till en bild eller en speciell CSS-klass för varje länk är inte bara tidskrävande, det kan också vara svårt att klara för en redaktör. Men det finns en smidig lösning baserad på jQuery som automatiserar detta.

Med jQuery implementerat och ytterligare några rader kod kan du automatiskt få till så att länkar med en speciell filändelse får en egen CSS-klass med en egen ikon.

Implementera jQuery

Först och främst måste du ladda ner jQuery och implementera det på din webbplats. Lägg filen i samma katalog som din webbplats och lägg in följande kod mellan HEAD-taggarna i ditt HTML-dokument.

Fredrik Pahlin tipsar i kommentarerna om att man också kan ladda in jQuery från Google.

jQuery-kod

För att åstadkomma den automatiska tilldelningen av CSS-klasser, använd jQuery-koden nedan. Vad koden gör är att den letar genom ditt HTML-dokument efter länkar till filer som har filändelsen som är nämnd i koden och lägger till en specifik CSS-klass för den länken.

I mitt första exempel är det ”.pdf” som är filändelsen som javascriptet letar efter och dessa länkar får CSS-klassen ”pdf”. Lägg även denna kod mellan webbplatsens HEAD-taggar.

Du kan till exempel också lägga till samma funktionalitet för .doc, en filändelse som används av Microsoft Word.

CSS-kod för ikonerna

Nästa steg är att lägga till CSS-klasser med ikonerna som bakgrundsbilder. Här är ett exempel på en CSS-klass för PDF-ikonerna. Bakgrundsbilden för PDF-ikonerna som jag använder är denna.