Web Standards Solutions 網頁設計標準規格

圖片置換

應該如何以CSS把文字換成圖片?
沒有完美的解決方案
能用，但是要小心

方法A:Fahrner圖片置換(FIR:Fahrner Image Replacement)
  以CSS的background或background-image屬性把文字換成圖片
  <h1 id="fir">Fahrner Image Replacement</h1>
  額外標籤
  <h1 id="fir"><span>Fahrner Image Replacement</span></h1>
  #fir{
   width: 287px;
   height: 29px;
   background: url(fir.gif) no-repeat; /*指定背景*/
  }
  #fir span{
   display: none; /*隱藏文字*/
  }
  優點：不支援CSS的看到文字，支援的看到圖片
  缺點：螢幕朗讀程式可能會遇到問題、必須加一組無意義的<span>、關閉瀏覽器顯示圖片功能，又支援部份CSS時，可能文字與圖片會皆空

方法B:Leahy/Langridge圖片置換(LIR)
  Seamus Leahy(http://www.moronicbajbus.com/playground/cssplay/image-replacement/)
  Stuart Langridge(http://www.kryogenix.org/code/browser/lir/)
  <h1 id="lir">Leahy/Langridge Image Replacement</h1>
  #lir{
   padding: 90px 0 0 0;
   overflow: hidden;
   background: url(lir.gif) no-repeat;
   height: 0px !important; /*給大多數瀏覽器*/
   height /**/: 90px; /*給IE5用*/
  }
  優點：不用<span>、螢幕朗讀可行
  缺點：關閉瀏覽器顯示圖片功能，又支援部份CSS時，可能文字與圖片會皆空、外框模型補丁

方法C:Phark法
  Mike Rundle(http://phark.typepad.com/phark/2003/08/accessible_imag.html)
  <h1 id="phark">The Phark Method</h1>
  #phark{
   height: 26px;
   text-indent: -5000px;
   background: url(phark.gif) no-repeat;
  }

Revised Image Replacement(http://www.mezzoblue.com/tests/revised-image-replacement/)

更多技巧
置換商標
  首頁
  <div id="logo">
   <span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></span>
  </div>
  其它頁面
  <div id="logo">
   <span><a href="/"><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></a></span>
  </div>
一對商標
  lo-fi:未使用樣式的頁面裡顯示於行內的版本
  hi-fi:現代瀏覽器之內被CSS引用
首頁CSS
  #logo img{
   display: block;
   width: 0; /*將圖片隱藏*/
  }
  #logo span{
   width: 173px;
   height: 31px;
   background: url(../images/logo_corn.gif) no-repeat;
  }
其它頁面CSS
  #logo a{
   border-style: none;
   display: block;
   width: 173px;
  }

圖片標籤輪轉效果
  Petr Stanicek:Fast Rollovers, No Preload Needed(http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/)
  Leahy/Langridge圖片置換法
標記原始碼
  <ul id="nav">
   <li id="thome"><a href="/" class="selected">Home</a></li>
   <li id="tguides"><a href="/guides">Guides</a></li>
   <li id="tmag"><a href="/magazine">Magazine</a></li>
   <li id="tarchives"><a href="/articles">Archives</a></li>
  </ul>
一張圖片，三種狀態
普通狀態、滑鼠移動狀態、啟動狀態
  #nav{
   margin: 0;
   padding: 0;
   height: 20px;
   list-style: none;
   display: inline;
   overflow: hidden;
  }
  #nav li{
   margin: 0;
   padding: 0;
   list-style: none;
   display: inline;
  }
  #nav a{
   float: left;
   padding: 20px 0 0 0;
   overflow: hidden;
   height: 0px !important;
   height /**/: 20px;
  }
  #nav a:hover{
   background-position: 0 -20px;
  }
  #nav a:active, #nav a.selected{
   background-position: 0 -40px;
  }
  #thome a{
   width: 40px;
   background: url(home.gif) top left no-repeat;
  }

http://www.simplebits.com/bits/tab_rollovers.html