リンクするファイル・拡張子を区別してファイルアイコンを自動で表示

デモページへopen_in_new

HTMl

<p><a href="sample.pdf" target="_blank">PDFへリンク</a></p>
<p><a href="sample.doc" target="_blank">Wordへリンク</a></p>
<p><a href="sample.xls" target="_blank">Excelへリンク</a></p>
<p><a href="sample.pps" target="_blank">PowerPintファイルへリンク</a></p>
<p><a href="sample.zip" target="_blank">zipファイルへリンク</a></p>
<p><a href="sample.exe" target="_blank">zipファイルへリンク</a></p>

CSS

a[href$=".pdf"] {
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href$=".doc"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
a[href$=".xls"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}
a[href$=".pps"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pps.gif) no-repeat center right;
}
a[href$=".zip"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_zip.gif) no-repeat center right;
}
a[href$=".exe"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_exe.gif) no-repeat center right;
}