CSS Filetype Detection - Blowsie

With Broken Link Warning

by blowsie

HTML

<a href="word.doc">word.doc</a>
<a href="word.doc">word.docx</a>
<a href="powerpoint.ppt">powerpoint.ppt</a>
<a href="powerpoint.pptx">powerpoint.pptx</a>
<a href="excelsheet.xls">excelsheet.xls</a>
<a href="excelsheet.xlsx">excelsheet.xlsx</a>
<a href="excelsheet.csv">excelsheet.csv</a>
<a href="excelsheet.xlsm">excelsheet.xlsm</a>
<a href="excelsheet.xlsb">excelsheet.xlsb</a>
<a href="archive.zip">archive.zip</a>
<a href="archive.rar">archive.rar</a>
<a href="archive.iso">archive.iso</a>
<a href="archive.7zip">archive.7zip</a>
<a href="outlook.msg">.msg</a>
<a href="outlook.oft">.msg</a>
<a href="outlook.pst">.msg</a>
<a href="audio.mp3">.msg</a>
<a href="video.wmv">.msg</a>
<a href="video.avi">.msg</a>
<a href="video.mp4">.msg</a>
<a href="photoshop.psd">.msg</a>
<a href="photoshop.pdd">.msg</a>
<a href="photoshop.raw">.msg</a>
<a href="image.jpg">.msg</a>
<a href="image.bmp">.msg</a>
<a href="image.jpe">.msg</a>
<a href="image.jpeg">.msg</a>
<a href="image.tif">.msg</a>
<a href="image.tiff">.msg</a>
<a href="image.gif">.msg</a>
<a href="image.png">.msg</a>
<a href="image.eps">.msg</a>
<a href="illustartor.ai">.msg</a>
<a href="flash.flv">.msg</a>
<a href="flash.swf">.msg</a>
<a href="code.php">.msg</a>
<a href="code.css">.msg</a>
<a href="code.html">.msg</a>
<a href="code.htm">.msg</a>
<a href="code.aspx">.msg</a>
<a href="code.ascx">.msg</a>
<a href="code.vb">.msg</a>
<a href="code.proj">.msg</a>
<a href="code.vspscc">.msg</a>
<a href="code.xml">.msg</a>
<a href="code.xaml">.msg</a>
<a href="document.pdf">.msg</a>
<a href="document.txt">.msg</a>
<a href="document.rtf">.msg</a>
<a href="access.accdb">.msg</a>
<a href="access.accda">.msg</a>
<a href="access.accdc">.msg</a>
<a href="access.accdt">.msg</a>
<a href="access.adp">.msg</a>
<a href="drawing.dwg">.msg</a>
<a href="drawing.dwf">.msg</a>
<a class="missing-file" href="missing">a</a>

CSS

a {display:block; font-size:12px; font-family: Tahoma; margin:2px;}
a[href]{
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document.png');
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}
a[href$=".doc"], a[href$=".docx"] { 
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-word.png'); 
}
a[href$=".ppt"], a[href$=".pptx"] { 
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-powerpoint.png'); 
}
a[href$=".xls"], a[href$=".xlsx"] { 
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-excel.png'); 
}
a[href$=".csv"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-excel-csv.png');
}
a[href$=".xlsb"], a[href$=".xlsm"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-excel-table.png');
}
a[href$=".zip"], a[href$=".rar"], a[href$=".iso"], a[href$=".7zip"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-zipper.png');
}
a[href$=".pst"], a[href$=".ost"], a[href$=".msg"], a[href$=".oft"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-outlook.png');
}
a[href$=".mp3"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-music.png');
}
a[href$=".mp4"], a[href$=".avi"], a[href$=".wmv"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-film.png');
}
a[href$=".psd"], a[href$=".pdd"] {
    background-image: url('http://dl.dropbox.com/u/14037764/Development/cdn/icons/filetypes/document-photoshop.png');
}
a[href$=".raw"] {
    background-image:...

JavaScript

$('a').each(function(){
$(this).text($(this).attr("href"))
});