53个CSS技巧翻译之PDF,ZIP,DOC链接的标注

sexboy024 楼主

PDF,ZIP,DOC链接的标注 36/53
英文链接 http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
中文链接 http://www.176so.com/past/2007/3/17/pdf_links_labeling/

有时候我们希望能明确的用小图标来标明我们的超链接的类型。是一个zip文档还是一个pdf文件。这样访问者就知道他所要点击的这个链接是下载而不是打开另一个页面了。如果所有的人都使用IE7或者FF的话。我们完全可以使用[att$=val]属性选择器，寻找以特定值（比如.zip和.doc）结尾的属性。

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

复制代码

不幸的是IE6以下浏览器不支持属性选择器。好在，可以通过在每个元素中添加类，使用JavaScript和DOM实现相似的效果。

下面给出了一个解决办法:

1. function fileLinks() {
   
2.     var fileLink;
   
3.     if (document.getElementsByTagName('a')) {
   
4.         for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
   
5.             if (fileLink.href.indexOf('.pdf') != -1) {
   
6.                 fileLink.setAttribute('target', '_blank');
   
7.                 fileLink.className = 'pdfLink';
   
8.             }
   
9.             if (fileLink.href.indexOf('.doc') != -1) {
   
10.                 fileLink.setAttribute('target', '_blank');
    
11.                 fileLink.className = 'docLink';
    
12.             }
    
13.             if (fileLink.href.indexOf('.zip') != -1) {
    
14.                 fileLink.setAttribute('target', '_blank');
    
15.                 fileLink.className = 'zipLink';
    
16.             }
    
17.         }
    
18.     }
    
19. }
    
20. window.onload = function() {
    
21.     fileLinks();
    
22. }

复制代码

当然，你需要在你的css文件中，增加这几个css类：

1. .pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
   
2. .docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
   
3. .zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

复制代码

效果

最后一点建议，你的小图标不要过分醒目，这会分散浏览者的注意力。

补充：我的空间每个月的流量有限。并且本懒人更新很慢。如果你觉得文章对你有用，请随意将内容复制粘贴到你的站内。但请注明来源。以便多给我带来几个IP。*_*

[ 本帖最后由 sexboy024 于 2007-3-20 14:58 编辑 ]

zuozeyu

顶下
不错

blank

请把题目重新该下，容易让偶产生误会！ 加个破折号说明下

261509559

我咋打不开预览效果呢······

sexboy024 楼主

空间商 崩溃了。
可能明天会好？

moonjeep

http://webdesign.maratz.com/lab/pdf_links_labeling/

kingdeone

不错，收藏！



深圳网络公司：http://www.kingdeone.com

一滩死水

非常不错。

coocboy

遍历所有的a 些js会不会使页面有些慢.

sexboy024 楼主

在IE中，window.onload事件会在页面其它元素被加载完毕之后立即触发，而FireFox里的window.onload事件会等待动态添加的那些脚本文件也被加载完毕后才触发。

这对专业的脚本开发人员可能有影响，但我们只需要知道，这段js代码是在页面元素都载入完毕，内容已经显示出来之后才执行，也就是说访客先看到了文字链接，然后（根据网速，机器等条件限制）延迟那么一下，才能看到链接后面的修饰图片。FF下因为已经在css中定义过了，所以一般不会出现延迟效果（除非网速巨慢，css没加载完）。这段js基本上只是为ie6准备的。

结论：哥们，您就放心用吧！

火狐狸

1. <script language="JavaScript" type="text/javascript">
   
2. function linkFilter() {
   
3.         var SiteURL = "www.shareday.com";
   
4.         var linkURL;
   
5.         if (document.getElementsByTagName("a")) {
   
6.                 for (var i = 0;(linkURL = document.getElementsByTagName("a")[i]); i++) {
   
7.                         if (linkURL.href.indexOf(SiteURL) == -1) {
   
8.                                 linkURL.setAttribute("target", "_blank");
   
9.                         }
   
10.                         if (linkURL.href.indexOf(".pdf") != -1) {
    
11.                                 linkURL.className = "link pdf";
    
12.                         }
    
13.                         if (linkURL.href.indexOf(".doc") != -1 || linkURL.href.indexOf(".docx") != -1) {
    
14.                                 linkURL.className = "link doc";
    
15.                         }
    
16.                         if (linkURL.href.indexOf(".zip") != -1 || linkURL.href.indexOf(".rar") != -1) {
    
17.                                 linkURL.className = "link zip";
    
18.                         }
    
19.                 }
    
20.         }
    
21. }
    
22. window.onload = function() {
    
23.         linkFilter();
    
24. }
    
25. </script>
    
26. 
    
27. <style type="text/css">
    
28. .link{
    
29. height:16px;
    
30. padding-left: 19px;
    
31. }
    
32. .pdf{
    
33. background: url("famfamfam_silk_icons_v013/icons/page_white_acrobat.png") no-repeat .1em 0em;
    
34. }
    
35. .doc{
    
36. background: url("famfamfam_silk_icons_v013/icons/page_white_word.png") no-repeat .1em 0em;
    
37. }
    
38. .zip{
    
39. background: url("famfamfam_silk_icons_v013/icons/page_white_zip.png") no-repeat .1em 0em;
    
40. }
    
41. </style>

复制代码

使用famfamfam的silk图标效果更好。

irise25

可以设定在链接上加图标吗？