CSS技術結合圖像實現動態效果的菜單導航

　　本文介紹一些我們經常使用但很少關注的東西，在下面的敘述中我們假設你的CSS使用的是@import技術，因為這里CSS可能會讓你對Opera 4失去信心。如果你把圖像作為你的頁面布局的一部分，在CSS的控制之下嵌入圖像很可能是你不希望得到的結果如果你使用的是一個不支持CSS2標準的瀏覽器例如Opera 4。下面介紹一個例子，使用一些GIF圖像去修飾圓角。

　　事實上我不想在網頁的HTML代碼中嵌入圖像，因為它們代表的只是視覺上的東西，而不是內容上的體現，因此我將它們和其它一些有代表性的部分放在CSS之下控制。 這個方法將使你更加方便地控制頁面，讓其變得更加漂亮。為了做出環繞的效果，我利用了CSS背景圖像:使用這些背景圖像的目的是要更好地適應CSS的布局，我們將這些圖像嵌入層的背景中。

　　在這里你可以看見我是怎樣定義圖片的大小的(19px*37px)，而且在每個圖片的末端有相應的背景圖像。然后將這兩幅圖片放置在預先確定好了的線性對象里邊。當然很多這些原理都是可以重復使用的，因此你最后的CSS代碼不需要很大。這個方法的唯一缺點就是它不能用來調整動態的圖片的大小，如果你的層比圖像小的話，它將被忽略，如果你的層比圖像大的話，它將反復被填進空白區。但是你很有可能就是不希望圖像在運作中的任何位置都能被覺察到。

　　CSS動態圖像技術

　　給CSS文本菜單賦予動態的技術，例如網頁的左側菜單，這種菜單現在被越來越多的人所喜愛。但是我不認為我曾經看見過這種技術:一個純粹使用CSS來實現這一效果的技術。它讓菜單擁有圖像轉換功能，這里的問題就是我們用純CSS去實現這一效果。下面使用兩個步驟來世實現菜單的圖像變換技術。第一步僅僅變動背景顏色;第二步，就是精確的旋轉多維圖像。(警告:這門技術的缺點就是其中一些技術不能與Opera 6一起使用，雖然他們在Opera 7中是一種很好的技術。)

　　變換背景圖像1

　　如果這是一幅透明的背景圖像，那我們就可以非常容易地使用選擇器改變其背景色。 在本例中圖像被嵌入在HTML資源中，這就意味著在不支持CSS2標準的瀏覽器中它也會顯示(除了文本瀏覽器!). 其代碼將比下面的例子復雜，但它能在我嘗試的所有瀏覽器中運作。要注意的是在實現效果的過程中一次僅能下載一張圖像。

　　變換背景圖像2

　　這個版本相對版本1是非常簡單的。其圖像是CSS背景圖像，因此不支持CSS2標準的瀏覽器中不會顯示出來:但是我們提供了一個可選擇的文本鏈接，這是一個被淘汰了的例子。

　　旋轉按鈕1

　　現在針對不需要JS腳本語言進行支撐的旋轉圖像講述一些新的方法，第一種方法是使用背景圖,利用a:hover特性，當指針指向圖像時改變背景圖,因此如果關閉了CSS的話圖像就不會顯示,同時我們還可以獲得可選擇的文本鏈接.該方法支持IE6,Netscape 7, Mozilla and Opera 7,但不支持Opera 6.第三類按鈕狀態可以通過相似方法:活躍選擇器來傳給圖像。讀者可以把這種方法當作是練習做一做。

　　旋轉按鈕1a

　　這是個不同于按鈕1的按扭.我們再次使用一幅CSS背景圖,但是不是使用一個旋轉選擇來加載一幅新的圖像給按鈕的其它狀態,我們使用CSS來改變現有圖像的位置.這樣使用如果圖像太大,則背景圖像被修剪.因此我們的按鈕是單獨的圖像包含兩種按鈕狀態.通常顯示上半部圖像,但是當按鈕旋轉圖像則替換顯示下半部.因此這是完整的圖像.使用這種方法這里有兩種優勢.首先,如果訪問按鈕時為了減少下載數據數量-僅下載一幅圖像帶替兩幅-因此這是更快的.其次,在第一次訪問時沒有延遲去等待下載第二幅圖像:它已經在這了.不需預載復雜的圖像。不利方面就是如果按鈕不被訪問,則一些位帶寬被浪費了,這些是在使用時的觀念,對按鈕1,HTML和CSS也是如此.主要的差異在:旋轉選擇。

　　結轉按鈕2

　　如下,另一途徑實現CSS旋轉圖像為使用圖像的Z索引特性,Z索引控制顯示哪個元素在最頂層.不幸的是,它不支持IE6或Opera 6.Opera 7, Mozilla 和 Netscape 7能工作,但是在這種情況下Mozilla是如此的慢,在CSS2瀏覽器旋轉不工作,僅頂層圖像顯示正常.在非CSS2瀏覽器頂層和旋轉圖像并排顯示,看起來是古怪的. Internet Explorer的工作區包含一個小處理程序,如果圖像背景色改變了,則Z索引也改變,Internet Explorer獲得變化進行相關工作.菲利普通過改變三原色值改變顏色(例如將#ffffff改為#fffffe)如此很小的改變效果都是顯著的。