画像置換技術

1、Fahrner画像置換
この技法は、発明者Todd Fahrnerに対する尊重を示すために、その後「Fahrnerイメージ置換(Fahrner Image Replacement,FIR)」とも呼ばれる.このテクニックの実装は非常に簡単です.要素のテキストをspanで囲み、CSSスタイルを適用してこのspanのテキストを非表示にし、最後に背景画像を要素に適用すればいいです.たとえば、次のHTMlタグについて:

<h1 id="pageHeader"><span>webjx.comspan>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は上記の2つの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;
}

利点:スクリーンリーダーは正常にアクセスできます.余計なことはないシンプルでエレガントな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 summaryを参照し、Paul Youngは既存のすべての方法の長所と短所を分析した後、新しい方法を提案し、それを「状態ドメイン方法」(The State Method)と命名した.
この画像置換技術はjsを用いて実現する必要があるが、簡単に実行でき、jsの一部をヘッダに導入するだけでよい.jsが実行されると、応答するルールの前に「.image-on」が付加され、クライアントのピクチャが無効になっていない限り、ルールが有効になります.以下はh 1の「ステータスドメインメソッド」に適用される宣言です.

h1 { 
width: 100px; 
height: 50px;
} 
@media screen { 
.images-on h1 { 
text-indent: -10000px;
background-image: url(image.png);
overflow: hidden; 
}
} 

第1のルールは常に有効であり、h 1は背景画像を追加する領域であり、第2のルールはimageが無効になっていない場合にのみ有効である.「text-indent」はテキストを画面の外にシフトさせ、「overflow:hidden」は主にFFの下にアンカーポイントを置いてクリックされたときに画面の外にフォーカスをシフトさせるために使用されます.

の第2のルールパッケージは@media screenに囲まれており、主に画像置換が印刷状態ではなくスクリーンリーダーでのみ発生することを保証するために使用される.このように処理しないと、ページ印刷時に多くのユーザーが意味のあるテキストではなく大きな隙間を見ることができます.しかし、私たちが印刷しなければ、それはあってもなくてもいいです.原作者のPaul Youngが与えた模範ページには@media screenブロックがありません.@media screenを抜きにして、私たちは中が子孫セレクタ(Descendant selectors)であり、選択子を含むと呼ばれる人もいることを発見しました.そこで、これらの背景表示情報が処理を実行するかどうかは、その(h 1)の祖先(.images-on)が存在するかどうかにかかっています.addClassとremoveClassでhtmlを動的に追加または削除できます.images-onクラス.

この技術は実行が速い.テキストがスクリーンの外にオフセットされているため、画像には透明な要素が含まれ、画像自体を通してテキストが見えません.Jsは実行が速く,ほとんど瞬時であり,ブラウザ自体の特性を十分に利用している.
メソッド解析
「ステータスドメインメソッド」は、cssルールをすばやく有効にする仮定状態のメソッドで、コンテキストバックグラウンドがdocumentであるため、ブラウザがDOMツリーを通過することを回避します.ステータスドメインメソッドを適用するには、次の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();

しかし、この方法は互換性がない2つの奇妙なブラウザがあります.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">/**/
            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">//
           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 Scopespan>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