สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์

CSS Code

<style type="text/css">
a[href$='.pdf']{
	background:url(images/pdf.gif) no-repeat right center;
	font-size:12px;
	padding-right:18px;
}
a[href$='.doc']{
	background:url(images/doc.gif) no-repeat right center;
	font-size:12px;
	padding-right:18px;
}
a[href$='.zip']{
	background:url(images/zip.gif) no-repeat right center;
	font-size:12px;
	padding-right:18px;
}
</style>

HTML Code

<p>
คลิกเพื่อดาวน์โหลด pdf ไฟล์ <a href="demo.pdf">demo1</a> <br />
หรือดาวน์โหลดเอกสาร word <a href="demo2.doc">demo2 </a><br />
หรือดาวน์โหลด zip ไฟล์ <a href="demo3.zip">demo3 </a>
</p>

ตัวอย่างผลลัพธ์

คลิกเพื่อดาวน์โหลด pdf ไฟล์ demo1
หรือดาวน์โหลดเอกสาร word demo2
หรือดาวน์โหลด zip ไฟล์ demo3

ดาวน์โหลดรูป