|
歸納
仔細研究了三種常用的圖片替換技巧,從最早的Fahrner圖片替換法開始,接著是它的兩種變形,雖然都不是完美的做法,但是Mike Rundle之類的技巧已經(jīng)非常接近完美了.應(yīng)該能在現(xiàn)實世界里應(yīng)用,只是必須要注意一些陷阱和缺點.
讓我們分析這三個方法的主要差異:
方法A:
-
需要一組額外的沒有意義的<span>標(biāo)簽.
-
在這段文字撰寫時,常被使用的屏幕閱讀器會被display屬性影響,不念出任何內(nèi)容(根據(jù)Joe Clark的研究結(jié)果而知)
-
在"關(guān)閉圖片顯示,啟用CSS"的時候,什么都看不到.
方法B:
-
不需要額外標(biāo)簽
-
屏幕閱讀器應(yīng)該能正常念出內(nèi)容.
-
要為IE5 for Windows使用盒模型Hack.
-
在"關(guān)閉圖片顯示,啟用CSS"的時候,什么都看不到.
方法C:
-
不需要額外標(biāo)簽
-
屏幕閱讀器應(yīng)該能正常念出內(nèi)容.
-
在"關(guān)閉圖片顯示,啟用CSS"的時候,什么都看不到.
現(xiàn)在所有常見的方法都共享了最后一個缺點,但隨著更多開發(fā)者持續(xù)研究圖片替換的技巧,相信有一天會看到能夠滿足所有人的解決方法.
在那之前,還有幾個圖片替換的實際應(yīng)用概念值得一提,將在本章稍后的"技巧延伸"單元中討論其中的兩個.
有個重點值得一提:有位遵照標(biāo)準(zhǔn)的設(shè)計師Dave Shea不斷地觀察圖片圖換技術(shù)的最新發(fā)展,同時維護了一份組織完善的頁面,記載了不少相關(guān)技巧.一定記得看看Dave的"Revised Image Replacement" (http://www.mezzoblue.com/tests/revised-image-replacement/).
技巧延伸
在這個單元中,首先先來看看兩個真實世界里或許能正確應(yīng)用的圖片替換技術(shù)的地方,首先,我們先來看看標(biāo)識(logo)替換的有用技巧,這是推廣FIR技巧的(方法A)的Douglas Bowman最先告訴我的.其次,我會分享Fast Company的網(wǎng)站是如何不使用JavaScript單靠圖片替換技術(shù)做出導(dǎo)航系統(tǒng)的.
標(biāo)識替換
在本章開始的時候討論了如何用CSS把文字替換成圖片.這些方法都有些特定的缺點,但是這些缺點陷在一種特殊情況下會完全消失:那就是用圖片.....替換掉另一個圖片.
但是為什么會想這么做?
Hi-Fi和Lo-Fi
以圖片替換掉另一個圖片的理由之一,可能是為了提供不同的網(wǎng)站標(biāo)識,一種給完全支持CSS(能正確處理background屬性)的瀏覽器,另一種則是給老舊瀏覽器,手持設(shè)備,屏幕閱讀器等.
如果你的標(biāo)識有配合CSS設(shè)計的透明顏色,特殊顏色時,這個方法尤其便利,你或許會想顯示Lo-Fi版本的標(biāo)識,讓頁面在CSS關(guān)閉或者不支持的時候仍然有不錯的外觀.
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——圖片替換 [4] 下一頁 標(biāo)記語言——圖片替換 [6]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 標(biāo)記語言——圖片替換 [5]
