css+JavaScript实现PDF、ZIP、DOC链接的标注
作者：sexboy024 来源：176so 时间：2007-05-11 17:03:00
内容摘要：本文介绍了使用CSS结合javascript来实现对超链接的类型进行标注，让浏览者明确是zip，doc,pdf或其它格式的文件。这样访问者就知道他所要点击的这个链接是下载而不是打开另一个页面了。
如果所有的人都使用IE7或者FF的话。我们完全可以使用[att$=val]属性选择器，寻找以特定值（比如.zip和.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; }
不幸的是IE6以下浏览器不支持属性选择器。好在，可以通过在每个元素中添加类，使用JavaScript和DOM实现相似的效果。
下面给出了一个解决办法:
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();
}
当然，你需要在你的css文件中，增加这几个css类：
.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; }
预览效果
[提示：你可先修改部分代码，再按运行]
最后一点建议，你的小图标不要过分醒目，这会分散浏览者的注意力。
原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
翻译：http://www.176so.com/past/2007/3/17/pdf_links_labeling/
标签：属性选择器,超链接,标注
0
投稿猜你喜欢
Google的YSlow——Page Speed（附插件下载)
2009-09-27 12:40:00
asp中提示至少一个参数没有被指定值 解决方法
2013-06-01 20:14:00
MySQL故障：mysqld-nt: Sort aborted错误的原因及解决办法
2009-11-03 14:32:00
是时候不用考虑基于字体大小（em）的设计了
2009-10-24 13:25:00
10个精致的导航菜单欣赏及点评
2011-09-22 20:33:44
一个取图片尺寸的类，支持jpg,gif,png
2007-10-18 10:25:00
SQL Server索引管理的六大铁律
2009-03-25 14:05:00
css设计小巧三条
2008-01-21 13:04:00
从SNS看社会化界面设计 I
2009-02-19 12:21:00
asp程序错误详细说明例表
2008-04-02 12:13:00
从SQL Server2000升级到2005的过程解析
2009-01-13 14:07:00
Script 元素 type 属性的妙用
2011-03-07 16:13:00
漂亮的title提示信息
2008-08-12 12:51:00
超半数中文网页一年内将“消失”
2008-03-08 12:49:00
Atlas—微软的Ajax工具包
2007-09-07 09:52:00
Xml中SelectSingleNode方法中的xpath用法
2010-01-30 12:46:00
Flash在某些多标签浏览器中的“伪沙箱”问题
2011-01-06 12:37:00
解决asp中ADODB.Stream 0x800A0C93 错误
2008-01-08 19:28:00
扫盲大讲堂：SQL查询结果集对注入的影响及利用
2009-09-05 09:49:00
通过表单的做为二进制文件上传request.totalbytes提取出上传的二级制数据
2011-03-16 10:39:00