图像替换技术

1、Fahrner图像替换

为了表示对发明者Todd Fahrner的尊重,这个技巧随后也被叫做“Fahrner图像替换(Fahrner Image Replacement,FIR)”。该技巧的实现非常简单:用span将元素中的文本包围起来,然后通过应用CSS样式隐藏这个span中的文本,最后将背景图像应用到该元素之上即可。例如,对于下面的这一段HTMl标记:

<h1 id="pageHeader"><span>webjx.com</span></h1>

我们可以使用下面的这段CSS容易地实现图像替换:

#pageHeader {
background: url(lemonfresh.gif) top left no-repeat;
width: 400px;
height: 20px;
}
#pageHeader span {
display: none;
}

通过使用CSS的display: none或visibility: hidden; 所以在#pageHeader 元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果却是一致的。图像替换技术非常强大且很快开始流行——若是没有了它,我们甚至无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一埠最为重要基石

2、Rundler的方案

设计师Mike Rundle提出了一种使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外。虽然该方案的适用性并不广泛——IE 5.0会将背景图片随文本一起推出浏览者的视线范围——但却相当简洁优雅。

<h3 id="header">I like webjx.com.</h3>

css

#header {
text-indent: -5000px;
background: url(sample-image.gif) no-repeat;
height: 25px;
}

优点:屏幕阅读器可正常访问;没有多余的<span>;简洁优雅的CSS。
缺点:并没有解决浏览器禁用图像后空白页面的可访问性问题;有时在IE 5.0中无法使用。
浏览器支持:WindowsInternet Explorer 5.5+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.

3.Levin的方案

Levin Alexander想出了一个绝妙的主意:不再将文本置于span中,而是将其从span中移出来,将文本和span一起放在父元素中,然后使用这个空白的span覆盖住文本,并将背景图像应用到该span之上。如果一切顺利的话,屏幕阅读器即可正常访问这段文本,且也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题。但新的问题也随之出现,那就是图像不能是透明的,否则用户将会看到下面的文本。且这种方案所需要的CSS极为冗长,让人难以理解。

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h1>

css

.replace {
position: relative;
margin: 0px; padding: 0px;
/* hide overflow:hidden from IE5/Mac \*/
overflow: hidden;
/* */
}
.replace span {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 1; /*for Opera 5 and 6*/
}
#myh1, #myh1 span {
height: 25px;
width: 300px;
background-image: url(thyme.png);
}

优点:屏幕阅读器可正常访问;解决浏览器禁用图像后空白页面的可访问性问题。
缺点:无法使用透明图像;CSS代码较为冗长。
浏览器支持:WindowsInternet Explorer 5+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.

4、状态域方法(The State Scope Method)

Dave Shea 在他的一篇文章对此做了详细的总结,参看Dave Shea’s excellent summaryPaul Young 在分析现存的所有方法的优缺点之后,提出了一种新的方法,并将其命名为“状态域方法”(The State Method)

该图像替换技术需要借助于js来实现,但很容易执行,只需要将一小段js引入到头部即可。一旦js执行,响应的规则前将附加“.image-on”,只要客户端的图片未被禁用,规则就会生效,下面是一条应用到h1“状态域方法”的声明:

h1 { 
width: 100px; 
height: 50px;
} 
@media screen { 
.images-on h1 { 
text-indent: -10000px;
background-image: url(image.png);
overflow: hidden; 
}
} 
  • 第一条规则总是生效,h1就是我们所说的要添加背景图片的区域,第二条只有在image未被禁用时生效。“text-indent”使文字偏移于屏幕之外,“overflow:hidden”主要用来在FF下放置锚点在被点击时其焦点偏移于屏幕之外。
  • 第二条规则包绕在@media screen中,主要用来保证图像替换只发生在屏幕阅读器中,而不是在打印状态下执行。如果不这样处理,页面打印时,多数用户将看到一个很大的空隙而不是有意义的文本。不过如果我们不打印,它就可有可无了,原作者Paul Young给出的示范页就没有@media screen块了。抛开@media screen不谈,我们发现里面是个 后代选择器(Descendant selectors),亦有人称之为包含选择符,于是这些背景显示信息是否执行处理,就关键在于它(h1)的祖先(.images-on)是否存在了!我们可以通过addClass与removeClass为html动态添加或删除.images-on类。

该项技术执行起来很快。因为文本偏移于屏幕之外,图像可以包含透明元素,透过图像本身,你看不到任何文本。Js执行很快,几乎是瞬时的,它充分利用浏览器本身的特性。

方法解析

“状态域方法”是在一种假定的状态下,快速使css规则生效的方法,其上下文背景为document,这样避免了浏览器遍历DOM树。应用“状态域方法”有两个理由:

  1. 针对用户的反应,页面部分内容再格式化;
  2. 基于客户端浏览器、设备、和其它状况而附加额外的样式。

“状态域方法”通过使用下面的script给html附加一个class。

document.enableStateScope = function(scope, on) 
   { 
     var de = document.documentElement; 
     if (on) 
     de.className += " " + scope; 
     else 
     de.className = de.className.replace( 
       new RegExp("\\b" + scope + "\\b"), ""); 
   };

这段js有一点小问题,在示例页中切换功能并不生效,我重新修改了一下,代码如下:

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement; 
On ?  addClass(de,scope) : removeClass(de,scope);  
};

上面的hasClass、addClass、removeClass方法借用的是《Pro JavaScript Techniques》提供的方法。如果你使用过jquery,方法将更简单。

“状态域”可以通过下面的方法来切换:

if (condition == true) {
document.enableStateScope("myScope", true); 
}

如果“状态域”为“on”,状态域的名字将附加到规则的选择器之前,下面这条规则在条件为真时会将锚点的颜色变成blue。

a { color: red; } 
.myScope a { color: blue; }

正如你所预想的那样,状态域图像替代技术是通过检查图像是否被禁用而工作的。如果未被禁用,将激活“image-on”状态域,这很直接了当。

检查图片是否禁用

该方法检查图片是否禁用,并不是请求服务器上的图片,因为那样会导致一次额外的http请求。作者创建了一个巧妙的方法。

在大多数浏览器中,Image对象可以实例化并追溯到一个无效的URL(http://0),这样很容易检测Image的状态。如果禁用,onerror事件将触发,在js文件的开头,j建立一个新的图像对象:

var img = new Image();

但是,有两个古怪的浏览器对此方法并不兼容。在Gecko浏览器中,不论Image是否被禁用。Onerror事件总是被触发。所幸的是,另外一种可行的方案可以解决此问题--给html元素附加一个无效的背景图片,然后通过getComputedStyle方法获得style属性。如果Image禁用,其属性为none或url( invalid-url:):

if (img.style.MozBinding != null) { /*判断是否为火狐*/
/************略************/
}else { 
    img.style.cssText = "-webkit-opacity:0"; 
    if (img.style.webkitOpacity == 0) { /*判断是否为safari*/
        img.onload = function(){ 
             /*如果图片的宽大于零,证明图片可用,我们把on设置为true,否则为false*/
            document.enableStateScope("images-on", img.width > 0);         
        } 
       /*动态生成gif图片,预防因为图片不存在,一直报错!*/
        img.src =   "data:image/gif;base64,"
               +  "R0lGODlhAQABAIAAAP///wAAACH5BAE"
               +  "AAAAALAAAAAABAAEAAAICRAEAOw=="; 
    } 
} 

最后,对于其它浏览器,在开始初始化Image对象时,仅需检测onerror事件是否发生。

if (img.style.MozBinding != null) {
/************略************/
}else {
    if (img.style.webkitOpacity == 0){
    /************略************/
    }else{
        img.onerror = function(e) {
            document.enableStateScope("images-on", true); 
        } 
        /*取消onerror事件  */
        img.src = "about:blank";
    }      
}

下面给出完整方法,利用闭包保持enableStateScope方法一直存在下去!

(function(){
    d=document;e=d.documentElement;c="images-on";i=new Image();t=i.style;s=d.enableStateScope=function(s,o){
        if(o)e.className+=" "+s;else e.className=e.className.replace(new RegExp("\\b"+s+"\\b"),"");
    };if(t.MozBinding!=null){
        t.backgroundImage="url("+d.location.protocol+"//0)";b=window.getComputedStyle(i,'').backgroundImage;if(b!="none"&&b!="url(invalid-url:)"||d.URL.substr(0,2)=="fi")s(c,true);
    }else{
        t.cssText="-webkit-opacity:0";if(t.webkitOpacity==0){
            i.onload=function(){
                s(c,i.width>0);
            };i.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
        }else{
            i.onerror=function(){
                s(c,true);
            };i.src="about:blank";
        }
    }
})();

此方法的一些优点

  • 当客户端的电脑不支持javascript与禁止图片显示时,它都能优雅地降级而不致于页面效果有太多的差异
  • 支持半透明或透明的图片
  • 实现非常简单,只要导入我们的脚本以及设置需要图片替换的区域
  • 由于是用非常基础的技术,即使是过气的游览器中也畅通无阻
  • 符合标准,对屏幕阅读器与搜索引擎友好
  • 不需要添加额外的标签
  • 不消耗内存(因为基本不遍历DOM树)
  • 即使是页面加载完毕对DOM进行操作也不会影响它的效果
  • 在加载过程基本不会引发或只有轻微的闪烁现象
  • 文本与图片可以在容器元素设置居中或居左对齐
  • 不要求在服务器端存在一张1*1的gif图片来防止出错
  • 在显示器与打印页上都显示良好
  • 由于是使用CSS background-image属性来设置图片,便于我们使用image sprites技术来减少请求数

附上原作者Paul Young的文章:http://www.sitepoint.com/article/image-replacement-state-scope/

完整代码:

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style type="text/css">
        </style>
        <script type="text/javascript">/*<![CDATA[*/
            var hasClass = function(ele,cls) {
                return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
            }
            var addClass = function(ele,cls) {
                if (!this.hasClass(ele,cls)) ele.className += " "+cls;
            }
            var removeClass = function(ele,cls) {
                if (hasClass(ele,cls)) {
                    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
                    ele.className=ele.className.replace(reg,' ');
                }
            }
            // Don't copy and paste this code, use the minified script
            document.enableStateScope = function(scope, on) {
                var de = document.documentElement;
                on ? addClass(de,scope) : removeClass(de,scope);
            };
            (function(){
                var de = document.documentElement;
                var img = new Image();
                // 针对于 Gecko内核游览器的处理
                if (img.style.MozBinding != null){
                    img.style.backgroundImage = "url(" + document.location.protocol + "//0)";
                    var bg = window.getComputedStyle(img, '').backgroundImage;
                    //如果images为off,则在FF2以及其旧版本中,bg的值为 "none"
                    //在FF3中,bg的值为"url(invalid-url:)"
                    if (bg != "none" && bg != "url(invalid-url:)" || document.URL.substr(0, 2) == "fi"){
                        document.enableStateScope("images-on", true);
                    }
                }else{
                    //针对于Safari游览器(包括 iPhone)的处理
                    img.style.cssText = "-webkit-opacity:0";
                    if (img.style.webkitOpacity == 0){
                        img.onload = function(){                         
                            document.enableStateScope("images-on", img.width > 0);
                        }
                        // Source the image to a 43-byte 1x1 pixel GIF image encoded as a data URI.
                        img.src =
                            "data:image/gif;base64," +
                            "R0lGODlhAQABAIAAAP///wAAACH5BAE" +
                            "AAAAALAAAAAABAAEAAAICRAEAOw==";
                    }else{// Handling for everything else
                        img.onerror = function(e){
                            document.enableStateScope("images-on", true);
                        }
                        img.src = "about:blank";
                    }
                }
            } )();
            //]]>
        </script>
        <script type="text/javascript">//<![CDATA
           window.onload = function(){
               document.enableStateScope("images-on", false);
           }
            // Toggles the images-on state scope on and off,
            // and displays the appropriate message
            function toggle(on){
                document.enableStateScope("images-on", on);
                document.getElementById(on ? "stateScopeOn" : "stateScopeOff").style.display = "block";
                document.getElementById(on ? "stateScopeOff" : "stateScopeOn").style.display = "none";
            }
            //]]>
        </script>
        <style type="text/css">
            .width{
                width: 800px;
                margin: auto;
                text-align: left;
            }
            .header H1{
                margin-top: 10px;
                margin-bottom: 25px;
                color: white;
                line-height: 1;
                top: -35px;
                font-size: 9pt;
                text-transform: uppercase;
            }
            .header H1 .statescope{
                color: #ABDDA9;
                letter-spacing: -2px;
                text-transform: none;
                font-size: 35pt;
                top: 0.52em;
            }

            .images-on .header H1{ /*利用images-on来监视H1的样式*/
                text-indent: -12345px;
                overflow: hidden;
                background:url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_aggregated.png) no-repeat;
                width: 297px;
                height: 66px;
                top: 0;
            }

            /*Toggle Switch*/
            #stateScopeOff, #stateScopeOn{
                position: absolute;
                top: -1px;
                right: 25px;
                background-color: white;
                padding: 9px 15px;
                border: 1px solid #79B17C; /*[e]1px solid @00*/
                font-size: 10pt;
                z-index: 1;
            }
            #stateScopeOn{
                display: none;
            }

        </style>
    </head>
    <body>
        <div class="width">
            <div class="header">
                <h1>The <span class="statescope">State Scope</span></h1>
            </div>
        </div>
        <div id="stateScopeOff">现在images-on这个类 <strong>是不存在的。</strong><a href="javascript:toggle(true)">是否添加它?</a></div>
        <div id="stateScopeOn">现在images-on这个类 <strong>已经存在。</strong><a href="javascript:toggle(false)">是否删掉它?</a></div>
    </body>
</html>

 

转载于:https://www.cnblogs.com/JoannaQ/p/3145295.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值