|
易用的圖片標簽翻轉(zhuǎn)效果
說這個特殊案例"易用"可能有點不符事實,我為Fast Company網(wǎng)站編寫的圖片標簽導(dǎo)航系統(tǒng)與本章稍早時討論的圖片替換技術(shù),同樣有個缺點,那就是"關(guān)掉圖片顯示,啟用CSS"的使用者什么都看不到.
然而,在你必須使用圖片制作導(dǎo)航內(nèi)容的時候(不管是為了克服空間限制還是字體要求),這個做法就很有價值,值得一看了.
易用性的部分是指:最后要以圖片制作導(dǎo)航標簽,但是標記源代碼仍然是靈活的,輕巧的無序清單,所有瀏覽器,電話,PDA應(yīng)該都能正常使用.
一起來看看整個方法是怎么完成的.
問題
當我還是Fast Company網(wǎng)頁小組的成員時,我們一度需要在FC的頂部導(dǎo)航列里放進更多的項目,但是空間已經(jīng)使用完了.先前導(dǎo)航列表幾元到嗎是以簡單,加上樣式的無序清單制作的,但是在800*600視窗解析度時,剩下的空間甚至不足以再放進一個項目.
解決方法
我決定組合并修改捷克作者 Petr Stanicek(又稱 Pixy)的"Fast Rollovers, No Preload Needed"(http://www.pixy.cz/blogg/clanky/cssnopreloadrellovers/)做法,以及本章稍早的時候提過的Leahy / Langridge圖片替換法,以便作出易于使用,不使用JavaScript的圖片標簽翻轉(zhuǎn)效果(圖14-11)
圖14-11 FastCompany.com的標簽導(dǎo)航系統(tǒng),2004年2月的情形
這是怎么辦到的?
標記源代碼:一個清單搞定全部
我希望繼續(xù)在源代碼里使用簡單的無序清單制作導(dǎo)航列.本書前面已經(jīng)有不少內(nèi)容提到過以清單制作導(dǎo)航列的好處了:他們很簡潔,而且能在文字瀏覽器,屏幕閱讀器,PDA,手提電話等正常使用.
以下是清單的本來面目(我刪去了一些項目以便進行示范):
<ul id="nav">
<li><a href="/" class="selected">Home</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/magazine/">Magazine</a></li>
<li><a href="/articles/">Archives</a></li>
</ul>
簡單明了,現(xiàn)在來為每個<li>標簽加上唯一的id,以便稍后用它們變出一些花樣來(就是用漂亮的圖片換掉每個標簽乏味的文字):
<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>
接著用Photoshop(或是你熟悉的圖片編輯軟件)制作一些標簽圖片.
一張圖片,三種狀態(tài)
Pixy卓越的快速翻轉(zhuǎn)效果,精華在于每個導(dǎo)航項目制作一張同時包含普通狀態(tài),鼠標滑過狀態(tài),激活狀態(tài)的圖片.稍后,我們將以CSS改變background-position,在適當?shù)臅r候顯示各個狀態(tài).
這個方法終結(jié)了以往使用JavaScript替換圖片,預(yù)先載入許多圖片的做法,真是個節(jié)省制作時間的好辦法,下載速度也變快了許多.
圖14-12 是一張我為Fast Company網(wǎng)站導(dǎo)航制作的圖片.每個狀態(tài)都是20像素高,整張圖片的高度是60像素.頂部20像素是普通狀態(tài),接著20像素則是鼠標滑過狀態(tài),最下面20像素則是激活狀態(tài)(同時也用來表現(xiàn)"你在這里"的效果).所使用的每個標簽都有一張類似的圖片.
圖14-12 一張包含三種狀態(tài)的圖片
使用一張圖片包含每個狀態(tài),讓我們能扔掉傳統(tǒng)的制作這類效果是需要加上的丑陋的JavaScript內(nèi)容,以改用簡單的CSS規(guī)則作出鼠標移動效果.這樣不錯.它同時也排除了其他CSS方法在分開開 / 關(guān)圖片的時候可能會遇到的閃爍問題,同時我們也不必預(yù)先載入任何圖片了.
出處：藍色理想
責任編輯：bluehearts
上一頁 標記語言——圖片替換 [6] 下一頁 標記語言——圖片替換 [8]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 7 頁 標記語言——圖片替換 [7]
