När du länkar till dokument av olika slag, till exempel PDF-dokument eller Microsoft Office-dokument, är det ofta en mycket god idé att illustrera vad det är för typ av dokument som länkas genom att använda små ikoner för att inte ge dina besökare obehagliga överaskningar.
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.
<head> <script src="jquery-1.3.2.js" type="text/javascript"> </script> </head>
Fredrik Pahlin tipsar i kommentarerna om att man också kan ladda in jQuery från Google.
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> </head>
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.
<script type="text/javascript">
$(document).ready(function() {
$("a[href$='.pdf']").addClass("pdf");
});
</script>
Du kan till exempel också lägga till samma funktionalitet för .doc, en filändelse som används av Microsoft Word.
<script type="text/javascript">
$(document).ready(function() {
$("a[href$='.doc']").addClass("doc");
});
</script>
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.
a.pdf {
padding: 0 0 0 25px;
background: url(images/icon-pdf.gif) no-repeat
}