css skills link annotation

CSS is being used more and more widely. Cascading style sheets have many advantages that table layouts do not have. First of all, from the layout or page The design is strictly separated from the information that appears on the page, so that the design of the page can be easily changed by simply replacing one CSS file with another. As a result, many techniques are reused by users, reducing a certain amount of work and time. This article introduces the method of annotating PDF, ZIP, and DOC links.
Sometimes we want to clearly indicate the type of our hyperlink with a small icon. Is it a zip document or a pdf
file. This way the visitor knows that the link he wants to click is to download rather than open another page. If everyone uses IE7 or FF. We can use the [att$=val] attribute selector to find attributes ending with a specific value (such as .zip and .doc).

##The following is a quote:

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, the following browsers IE6 do not support attribute selectors. Fortunately, you can achieve a similar effect using

JavaScript and DOM by adding classes to each element.

The following is a solution

:

The following is a quote:

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 to your css file:

The following is a quote:

.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; }

#-->

The above is the detailed content of css skills link annotation. For more information, please follow other related articles on the PHP Chinese website!