最簡單的CSS圖片翻轉效果

今天有讀者詢問製作滑鼠經過時切換圖片的效果，這種效果也稱為“翻轉”效果(roll-over)。原來這種效果大多使用Javascript實現，實際上用CSS可以非常方便地製作出來的。

這裡給出一個最簡單的效果，在深入的複雜效果變化就非常多了，有興趣的讀者可以慢慢深入研究。

先看一下這個效果，將滑鼠移到按鈕圖片上時，圖片就會成另一個了。

Button Text

 

這個效果實現其實非常簡單，第一步：準備兩個圖片，大小完全相同即可，這裡是128X34像素。

 

左邊這個是通常狀態時的圖片，叫background.gif，右邊這個市滑鼠經過時的圖片，叫background-hover.gif。

第二步，寫HTML部分的代碼：

1	<a href="#">Button Text</a>

就是一個非常普通的超連結文本，如果希望完全使用圖片而不是用任何文字，也可以。

第三步：CSS部分的代碼是這樣的：

12345678910111213141516171819

a:link, a:visited{display:block;width:128px;height:34px;font-size:14px; font-family:Arial;line-height:34px;text-align:center;color:black;text-decoration:none; background:url('background.gif') no-repeat; } a:hover, a:active{background:url('background-hover.gif') no-repeat;color:white; }

好了，這個效果就完成了，是不是非常簡單。下面簡單解釋一下CSS代碼的含義。

第1~14行代碼是定義滑鼠沒有經過超連結時的CSS樣式：

首先要把a元素變為區塊層級元素，然後設定它的高度和寬度與圖片相同。

然後是文字放到圖片的中心位置。

最後設定背景映像的地址。

接下來的第16~19行代碼定義滑鼠經過時所需要變化的CSS樣式。

把文字的顏色由黑色變為白色，並把圖片換成另一個圖片即可了。

說明與討論：

1：如果對上面的解釋還不清楚，比如什麼是“區塊層級元素”？如何設定背景映像？這些基本CSS設定方法還不清楚，這些內容很難用一兩句話說清楚，請讀者仔細看本站的視頻教程或《精通CSS+DIV網頁樣式與布局》這本書，真正把基礎掌握紮實永遠比模仿著做出幾個效果更重要。

2：讀者在實驗這個效果的時候，可能會發現這個效果目前有一個缺陷，滑鼠移到圖片上以後，很可能紫色的圖片不會立即出現，而是幾秒鐘以後才出現，這是因為這個圖片當時還沒有下載到本機電腦上，因此這樣對於訪問者的感受就不太好了，解決方案是把上面兩個映像和在一個圖片中，通過使用背景映像的定位屬性，來實現普通狀態和hover狀態顯示圖片上的不同地區，這樣就不會有這樣的停頓了。

3：這個例子還可以進一步改進，目前的做法中，按鈕的寬度是固定的，如果希望按鈕的寬度能夠隨著按鈕上的文字的長度自動是適應，就要使“滑動門”技術了，可以參考《CSS滑動門技術的簡單應用》這篇文章，先搞懂“滑動門”的原理，就可以應用到本例中了。