您在這裡

使用圖片式主連結

sylin's 的頭像
sylin 在 2008-05-25 (周日) 04:41 發表

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

從前沒有 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 去作這件事

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


看起來 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 也要跟著調整,不過如果不常改的話應該是還好
另外我也不確定能不能支援次選單,因為我還沒用到那個部份,就沒去研究。

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

問個問題,因為最近在做無障礙網頁空間,如果照你的作法,圖片說明的部分會無法通過(1.1:H101000 圖片需要加上替代文字說明),要如何在css中加上圖片說明? 是單純使用
background: #b9d5f3 url(images/menu-1a.gif) alt(text) no-repeat;
這樣就好了嗎?

我是MIS,略懂mail、http、dns、proxy server
習慣使用redhat系列linux
debian系列摸索中...

圖片選單模組 - imagemenu,可以做 rollover:
http://drupaltaiwan.org/module/imagemenu

無障礙網頁會去查 CSS 嗎? 不會的話,放在 CSS 裡是沒用的,且 background 沒有 alt 屬性吧?
其實這不會是問題,因為 CSS 圖片選單在 HTML 裡並沒有出現 img tag,沒有圖片,就不需要替代文字了啊~ 只要 a tag 有說明就好~

哇..果然有現成的 module, 感謝. 不過他是用 table 去做的,所以排版也是要再調整
有空再改用 imagemenu 作看看

另外, 我原本再做的時候的確沒想到無障礙網頁的問題,不過無障礙測試應該不會管背景圖
背景圖本身不代表任何意義,他只是裝飾而已, 跟 body 的背景一樣
a tag 的 alt 可以在選單項目裡設定
所以這樣說起來好像無障礙這方面應該是沒問題的...

嗯,跟background應該沒關係,可是,把http://webamp.giga.net.tw/拿去做測試,就真的是那幾個圖片過不了呢!

受測網頁尚未達此等級無障礙標準,以下是檢測時發現的錯誤:
1. 1.1:H101000 圖片需要加上替代文字說明(15個)
--第22、23、24、25、64、67、70、73、76、82、92、95、139、214行

第61行產品介紹
...
第64行

可以發現,「產品介紹」這個menu加了 alt就可以過,其他的圖片就不行了。

我是MIS,略懂mail、http、dns、proxy server
習慣使用redhat系列linux
debian系列摸索中...

webamp 是用 img, 但我的方法不是啊
我是用 CSS 的 background 去達到看起來像 a tag + img tag 的功能
另外 imagemenu 也是用 a tag + img tag 的方式

對啊,我也覺得奇怪,應該和background的圖片無關才對。
那麼,這裡的問題應該是「產品介紹」這個menu有alt,可是其他的就沒有?

我是MIS,略懂mail、http、dns、proxy server
習慣使用redhat系列linux
debian系列摸索中...

懂了,感謝解惑~
因此,問題還是出在非drupal、非css的地方上。

我是MIS,略懂mail、http、dns、proxy server
習慣使用redhat系列linux
debian系列摸索中...