Annotations for PDF, ZIP, and Doc Links

Pdf| Links

Original:http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
Translation:http://www.176so.com/past/2007/3/17/pdf_links_labeling/

CSS tips for PDF, ZIP, doc link annotations

Sometimes we want to use small icons to clearly indicate the type of hyperlink we have. is a zip document or a PDF file. The visitor will know that the link he is clicking on is a download instead of another page. If all the people are using IE7 or ff. We can use the [Att$=val] property selector to look for properties that end with a specific value, such as. zip and. doc.

A[href$= ". pdf"] {padding-right:19px; Background:url (pdf.gif) no-repeat 100%. 5em;}
a[href$= ". zip"] {padding-right:17px; Background:url (zip.gif) no-repeat 100%. 5em;}

Unfortunately, IE6 the following browsers do not support property selectors. Fortunately, you can use JavaScript and DOM to achieve similar effects by adding classes to each element.

Here is a workaround:

function FileLinks () {
var Filelink;
if (document.getElementsByTagName (' a ')) {
for (var i = 0; (Filelink = document.getElementsByTagName (' a ') [i]); i++) {
if (FileLink.href.indexOf ('. pdf ')!=-1) {
Filelink.setattribute (' target ', ' _blank ');
Filelink.classname = ' PDFlink ';
}
if (FileLink.href.indexOf ('. Doc ')!=-1) {
Filelink.setattribute (' target ', ' _blank ');
Filelink.classname = ' DocLink ';
}
if (fileLink.href.indexOf ('. zip ')!=-1) {
Filelink.setattribute (' target ', ' _blank ');
Filelink.classname = ' Ziplink ';
}
}
}
}
Window.onload = function () {
FileLinks ();
}

Of course, you need to add these CSS classes in your CSS file:

. pdflink {padding-right:19px background:url (pdf.gif) no-repeat 100%. 5em;}
. doclink {padding-right:19px background:url (doc.gif) no-repeat 100%. 5em;}
. ziplink {padding-right:17px background:url (zip.gif) no-repeat 100%. 5em;}

Last but not least, your small icons should not be too eye-catching, which will distract the viewer's attention.