使用圖片式主連結

來分享一下我前幾天把主連結從文字改成圖片的作法

從前沒有 CSS 的時候，有些選單選項字型、背景的變化常會用圖片來作，像這樣





後來學會了 CSS 以後，知道可以用 ul+li 來作選單列表，然後搭配 CSS 來作裝飾
然後會有一些如 CSS Tab 的技巧

不過如果那個選單的背景圖比較複雜的話，學藝不精的我就弄不出來了
我本來是想找找看有沒有 module 可以提供這個功能，可以在新增選單項目時一併上傳對應的圖片的，不過一下子沒找到。
主站也有人提供一些作法，但是一下子我也看不太懂，而且好像是 4.7 版的資料，所以我只好嘗試從 theme 下手

我使用 Drupal 5.7 + wabi theme 來修改
本來硬改成用 img 應該也是改的出來，但這樣就很鳥，所以試著用類似 CSS Tab 的方式去完成

舉例來說，就像是這個左邊的選單 http://webamp.giga.net.tw/
就是用 a + img 去作，選單的圖片也包含了說明文字的部份，另外還用了 java script 去作 swapImage 讓游標移動項目時會有變化
這篇的目的就是要用 CSS 去作這件事

觀察產生選單的部份長這個樣子

• Item1
• Item2

看起來 class 是有規則的。先幫選單項目的連結加上背景圖片(放在 images 下取名 menu-?.gif)

.menu-1-1-2 a {
background: #b9d5f3 url(images/menu-1.gif) no-repeat;
}
.menu-1-2-2 a {
background: #b9d5f3 url(images/menu-2.gif) no-repeat;
}


可是這樣子背景只有文字佔的部份會顯示，可是我現在的情況是要顯示完整的圖片作為選單項目，所以還要加上

#navlist li a {
display: block;
width: 120px;
height: 50px;
}

把 a 設為 block, 並把寬跟高設為跟圖片大小一樣，這樣就會顯示完整的圖片。

再來是由於我背景圖上已經有說明文字了，但是裡頭的文字還是會再出現一次，看起來就很怪
所以我用 font-size: 0pt; 把字藏起來，可是在 IE6 裡不會完全消失，只會變很小一條線，所以又用 text-indent: -999em; 把字踢到遠方去，變成

#navlist li a {
display: block;
font-size: 0pt;
text-indent: -999em;
width: 120px;
height: 50px;
}

這邊另一個方式是把底圖裡的文字拿掉，再把字排到定位，可是我弄不出來耶，沒辦法把字放在某個定位，還請大家指教

(這是一個 a tag)
------------------------
|                      |
|                      |
|                文字   |
------------------------

再來是當游標移動到連結的位置時換用不同的圖片表示 (images/menu-?a.gif)

.menu-1-1-2 a:hover{
background: #b9d5f3 url(images/menu-1a.gif) no-repeat;
}
.menu-1-2-2 a:hover{
background: #b9d5f3 url(images/menu-2a.gif) no-repeat;
}

本來以為是這樣就完成了，結果發現主連結點進去以後，對應的項目會用不同的 class ，如 menu-1-1-2-active
所以又把他全部補上，結果大致是如下:


#navlist li a {
display: block;
font-size: 0pt;
text-indent: -999em;
width: 120px;
height: 50px;
}
.menu-1-1-2 a, .menu-1-1-2-active a{
background: #b9d5f3 url(images/menu-1.gif) no-repeat;
}
.menu-1-1-2 a:hover, .menu-1-1-2-active a:hover {
background: #b9d5f3 url(images/menu-1a.gif) no-repeat;
}
.menu-1-2-2 a, .menu-1-2-2-active a {
background: #b9d5f3 url(images/menu-2.gif) no-repeat;
}
.menu-1-2-2 a:hover, .menu-1-2-2-active a:hover {
background: #b9d5f3 url(images/menu-2a.gif) no-repeat;
}


很抱歉這篇沒有配合圖片說明，只能用文字敘述，希望大家看得懂我的作法
我這個作法在每次主選單項目作調整時， style.css 也要跟著調整，不過如果不常改的話應該是還好
另外我也不確定能不能支援次選單，因為我還沒用到那個部份，就沒去研究。

如果大家有更好的方法，也麻煩指點一下，謝謝