圖像替換技術(shù)有相當?shù)挠锰? 特別是注重視覺的設(shè)計, 而且在一定程度上也不會影響非可視化瀏覽器的用戶群(屏幕閱讀器).
本節(jié)用到的圖片只有一個:
經(jīng)典FIR
在文字外包上一組span標簽, 并在CSS中將這個span進行display:none 操作, 使其隱藏, 然后在原文字的容器的CSS中加上background-image, 以達到圖像替換.
HTML代碼如下:
�。糷3 id="header"＞
＜span＞Revised Image Replacement＜/span＞
�。�/h3＞
CSS代碼大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
缺點:
屏幕閱讀器會略過定義 display:none 的容器, 會導(dǎo)致那部分用戶無法得知當前的文字內(nèi)容, 而且需要一個完全沒有語義的span標簽完成這個效果. 在關(guān)閉圖像, 啟用CSS的情況下, 用戶得不到該有的內(nèi)容.
單像素＜img＞替換
與經(jīng)典FIR類似, 用span將文字隱藏, 并且在span外, 原父容器中加上一個1像素透明圖片, 并且將被隱藏的文字加到該圖片的alt屬性中, 利用在圖片不可用的情況下, 使用alt中的文字替換圖像的原理, 使用戶在關(guān)閉圖像, 啟用CSS的情況下也能得到文字信息.
HTML代碼如下:
�。糷3 id="header"＞
＜img src="shim.gif" alt="Revised Image Replacement" /＞
＜span＞Revised Image Replacement＜/span＞
�。�/h3＞
CSS代碼大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
缺點:
無語義標簽.
Radu 方法
與Phark方法類似, 通過賦予文字一個外補丁來達到隱藏的效果. Radu只運行于IE5
HTML代碼如下:
�。糷3 id="header"＞
Revised Image Replacement
�。�/h3＞
CSS代碼大致如下:
#header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 -2000px;}
缺點:
同樣無法在關(guān)閉圖像,開啟CSS的情況下無法獲取內(nèi)容.
|
