|
示例
為了避開著作權(quán)律師的糾纏,我將再度以個人網(wǎng)站作為示例.它不僅替換了標識圖片,同時還考慮到首頁之外的其他頁面,啟用CSS版的標識仍能作為超鏈接點擊,連回首頁.
一起來看看我在首頁上標記標識所使用的源代碼,以及其他頁面使用的源代碼.
這是首頁的:
<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>
一對標識
圖14-6和14-7是我使用的兩個標識,前面這個是在未使用樣式的頁面里顯示于行內(nèi)的版本(Lo-Fi),而后面這個則是在現(xiàn)代瀏覽器之內(nèi)被CSS引用的圖片(Hi-Fi).
圖14-6 未啟用CSS的瀏覽器會看到的logo_lofi.gif
圖14-7 啟用CSS的瀏覽器會看到的logo_corn.gif
CSS內(nèi)容
把這些東西搭在一起,加上CSS使每件事成為可能!
首先,把行內(nèi)圖片的寬度設(shè)為0將它隱藏起來,記得不要用display屬性隱藏lo-fi標識,這樣屏幕閱讀器才比較有機會正確念出隱藏圖片(的alt文字內(nèi)容):
#logo img {
display: block;
width: 0;
}
接著,為我偷偷加上的<span>標簽以background屬性指定hi-fi標識圖片.對,這很沒意義,語義上也很沒意義,但是這次就當成例外吧.
#logo span {
width: 173px;
height: 31px;
background: url(../images/logo_corn.gif) no-repeat;
}
你應(yīng)該發(fā)現(xiàn)了,我們該做的所有事情就是把高度,寬度設(shè)成與替換用的圖片相同,同時把背景圖片指定為hi-fi版.
恢復(fù)超鏈接
最后,對首頁以外的其他頁面來說,仍然希望使用者能夠點擊標識,回到首頁.但是在把圖片寬度設(shè)置成0之后要怎么辦到呢?現(xiàn)在根本沒有能夠點擊的區(qū)域.
我們?yōu)闃俗R的<a>加上一條聲明,把它的點擊范圍"伸展"到覆蓋整個背景圖片的范圍,寬度與替換的圖片相同.
#logo a {
border-style: none;
display: block;
width: 173px;
}
通過用CSS指定<a>的寬度,我們甚至能提供兩張大小不同的圖片,在這個例子中,他們的大小是一樣的.
加上了border-style屬性去掉了大多數(shù)瀏覽器為圖片鏈接自動加上的預(yù)設(shè)邊框(圖14-8).
圖14-8 超鏈接標識,顯示選擇范圍
成果
看看圖14-9和14-10,你能發(fā)現(xiàn),再使用剛剛示范的標記源代碼與樣式之后,就能為無法使用樣式,無法啟動CSS的使用者分別提供一套標識.當標識有鏈接時,仍能以一條簡單的CSS做出選擇范圍.
圖14-9 支持CSS的瀏覽器顯示hi_fi標識
圖14-10 不支持CSS時顯示的lo-fi標識
相信這個示例顯示了現(xiàn)實世界里使用圖片替換技術(shù)也不必內(nèi)疚的情況,確切來說,就是將現(xiàn)存的行內(nèi)圖片用另一個CSS引用的圖片取代的情況.
接下來,繼續(xù)看看另一個現(xiàn)實世界的個案研究,這是我為Fast Company網(wǎng)站設(shè)計的導(dǎo)航系統(tǒng),它結(jié)合了無序清單,圖片置換..以及一點其他的手法.
出處：藍色理想
責任編輯：bluehearts
上一頁 標記語言——圖片替換 [5] 下一頁 標記語言——圖片替換 [7]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 標記語言——圖片替換 [6]
