饮水思源 - 文章阅读  [讨论区: WebDevelop]
[转寄/推荐][转贴][删除][修改][设置可RE属性][上一篇][返回讨论区][下一篇][回文章][同主题列表][同主题阅读][从这里展开]
发信人: PerfectWorks (晓来雨过|不用迅雷|远离校内), 信区: WebDevelop
标  题: 用javascript实现完美图像替换(pFIR)
发信站: 饮水思源 (2009年01月01日03:37:57 星期四), 站内信件

搞了一晚上终于写好了,hProxyN你的检测浏览器是否打开图像显示的方法真的很赞。不
知道类似的技术有没有人提出来过。(我觉得这么简单的方法500%会有人提……)

原文地址:http://perfectworks.info/pfir.html

简单摘要:

Fahrner图像替换技术(Fahrner Image Replacement,FIR)是CSS基础技术之一,我在
这篇文章(http://perfectworks.info/image-replacement.html)里简单的讨论了一下
现有的FIR技术,就目前情况来讲,纯CSS实现的FIR效果或多或少都有些不足,主要问题
在于屏幕阅读器和关闭图像并打开CSS(image off/css on)的情况下图片文字显示不正
常。在上文的最后,文章提到了最新的iFIR/sFIR技术,即通过javascript+Flash进行图
片替换,缺点在于Flash文件的体积以及对中文的不良好支持。本文旨在提出一种新的思
路,解决屏幕阅读器和关闭图像并打开CSS情况下FIR不能正常工作的问题,并且是一种
相对Flash来言轻量级的纯javascript解决方法,暂且称之为pFIR(PerfectWorks’ FIR
)(注1)。

思路

为了解决关闭图像并打开CSS情况下图片文字显示问题,最好的办法是通过javascript获
取当前浏览器对图片的支持情况。若浏览器显示图片,则通过javascript进行FIR,反之
则保持文字不变。

目标HTML以及其他环境

<html>
<head>
<style type="text/css" media="screen">
body{
  background-color:black;
  color:white;
}
</style>
</head>
<body>
<h1 id="title">PerfectWorks</h1>
</body>
</html>

......中间略掉了,好长........

用jQuery让它更简洁!

用jQuery写这个程序只需要短短8行:

$(document).ready(function(){
  function pFIR(className,className2){
    $('<img src="_checkstatus.gif" />').css({position:'absolute',height:'0px
',width:'0px'}).bind('load',function(e){
      $('.'+className).addClass(className2);
    }).prependTo('body');
  };
  pFIR('FIR','FIRed');
});

其中第一行使这个函数在页面结构加载完毕后执行,第三行通过工厂函数封装了一个<i
mg>标签,并绑定onload事件。第四行找出所有符合.className(这里是.FIR)的元素并
增加一个class名className2(这里是.FIRed),第五行将这个image标签插入到 body元
素中,第七行执行这个函数。这就是jQuery的强大力量。

完整代码在这里(example 3.)(http://perfectworks.info/wp-content/uploads/200
9/01/firjquery.html)
==

本人长期提供义务数据恢复服务,有需要请投条 试试用免费的7zip换掉WinRAR,用免费的XnView换掉ACDSee吧~ ┌-—————┐ ┌————————┐ │听说你GG在 │ │你GG才用迅雷 , │ │用迅雷? >╭● ●╮< 你们全家都用迅雷│ └————-—┘ ▲ ▲ └————————┘ ∏ ∏ 这个故事告诉我们:珍爱RP,远离XL -- ※ 来源:·饮水思源 bbs.sjtu.edu.cn·[FROM: 59.78.40.58] ※ 修改内容:·pw 于 01月01日03:45:29 修改本文·[FROM: 59.78.40.58]

[转寄/推荐][转贴][删除][修改][设置可RE属性][上一篇][返回讨论区][下一篇][回文章][同主题列表][同主题阅读][从这里展开]