[CSS]如何製作一張圖片多種狀態的圖像翻轉menu？

出處:http://www.webkkk.com/html/css/divcss/20070505/20927.html
根據頁面設計的需要，有時候我們使用圖像翻轉菜單，所謂圖像翻轉菜單是指在鏈接狀態、鼠標激活狀態實現不同的圖片效果。
　　在通常的圖像翻轉菜單製作中，會出現閃爍的情況，這是因為圖片載入延時所造成的，也就是圖像還未完全加載沒能完全顯示，加載時間的間隔就會出現閃爍的現象。
　　我們今天所要討論的是將圖像翻轉菜單的多種狀態製作成一張圖片，我們應用css對背景圖片的位置進行控制，進而實現一張圖片多種狀態的圖像翻轉菜單效果。

　　我們先看看下面的這張圖片。

　　這張圖片從上至下結合了三個不同的狀態，鏈接樣式，激活樣式，當前頁樣式。
　　來看下面的css代碼：

Example Source Code [www.52css.com]

#nav {height:43px; width:700px; margin:18px 0 0 38px;}
#nav ul {
font-size:12px;
color:#000;
}
#nav li {
width:115px;
height:43px;
display:block;
float:left;
list-style-type:none;
margin-right:2px;
overflow:hidden;
}
#nav li a {
display:block;
width:115px;
height:43px;
padding:50px 0 0 0;
overflow:hidden;
text-align:center;
}
#nav li a.an {background: url(buttom.jpg) no-repeat 0 0;}
#nav li a:hover {background-position: 0 -43px;}
#nav li a.dang {background-position: 0 -86px;}

　　我們來看下面的xhtml代碼：

＜div id="nav"＞
＜ul＞
＜li＞＜a href="http://www.52css.com/" class="an dang" title="我愛CSS 52css.com"＞52css.com＜/a＞＜/li＞
＜li＞＜a href="http://www.52css.com/" class="an" title="我愛CSS 52css.com"＞52css.com＜/a＞＜/li＞
＜li＞＜a href="http://www.52css.com/" class="an" title="我愛CSS 52css.com"＞52css.com＜/a＞＜/li＞
＜li＞＜a href="http://www.52css.com/" class="an" title="我愛CSS 52css.com"＞52css.com＜/a＞＜/li＞
＜li＞＜a href="http://www.52css.com/" class="an" title="我愛CSS 52css.com"＞52css.com＜/a＞＜/li＞
＜/ul＞
＜/div＞
　　#nav li聲明了圖像按鈕區域的寬高，去掉了列表標記，並且設置右邊距兩個像素，溢出部分直接隱藏。

　 　#nav li a同樣聲明了寬與高，溢出部分直接隱藏。設置了內邊距，距離頂部50px，這一設置有什麼作用呢？我們需要考慮一種情況的發生，如果用 戶在瀏覽網頁的時間，由於網速等原因沒有能加載css文件，那用戶根本沒有辦法點擊鏈接，因為鏈接的定義全部寫在css文件中，我們除了應用圖片區域塊的 無序列表的鏈接，還應該加上文字鏈接，這樣就不必擔心沒有CSS文件無法訪問。同時也有利於SEO，讓搜索引擎更容易的抓取網站上的內容。文字鏈接是不能 與圖片區域重合的，這樣就會發生重疊影響美觀，我們設置距離頂部50px，文字已經位於圖像區域以外，並且設置了溢出部分直接隱藏。在正常情況下是看不到 文字鏈接的。在下面的運行效果中，你可以去掉CSS樣式定義看看實際效果。

　　#nav li a.an　聲明了名稱為an的類的背景圖片，不重複，位置是距頂距左均為0.
　　#nav li a:hover　聲明了激活時背景圖片的位置，距頂部-43px；也就實現了圖片中間位置那一按鈕的效果。
　　#nav li a.dang 聲明了當前頁圖片的位置，距頂部-86px；也就實現了圖片最下面位置那一按鈕的效果。這三個CSS代碼中，最重要的就是background-position屬性.

　　細心的你一定注意到在無序列表的第一個鏈接中，我們使用了class="an dang"，這是一種特殊的聲明方式，大家在實際使用中可以靈活的應用，這一聲明表示，這一鏈接，使用an與dang雙重效果。
　　請您特別注意：class="an dang"的結合運用效果，就實現了當前頁指引，我們不需要修改任何樣式與圖片，只需要在當前欄目的 class="an"更改為class="an dang"即可。