CSS Image Rollover 延伸應用

6

因為案子實際需求所延伸出來的應用技巧,而骨子裡用的就是 Image Rollover

實際情況是選單前需要有代表性 icon,icon 是包覆在 <a> 裡的 <img>,但選單本身因為登入者權限的不同,開放可點的選項也不同,而不能點選的選項 icon 必須是灰階的狀態。

換句話說,有 <a> 時影像是有色彩的,若只是單純的 <li>選單</li>,則影像必須是灰階無色彩的。 原本 Programmer 是要求寫兩組 CSS 分別給有色以及無色的圖片,再用程式控制在不同情況下套不同的 CSS,完全是想起來就感麻煩的做法,後來靈機一動想到先前寫的 Image Rollover,所以就直接來試試看,沒想到也就輕鬆的完成。

基本概念與 Image Rollover 大同小異,一樣將 <img> 設為絕對位置,只是這裡是讓原本 Image Rollover 中 a:hover 的變動圖片位置,改成有 <a> 時就變動,而只有 <li>選單</li> 的狀態則取代了原本的 <a>。

1
2
3
4
5
<ul class="menu">
    <li><a href="#"><img src="s1.jpg" alt="發表文章" />發表文章</a></li>
    <li><a href="#"><img src="s2.jpg" alt="會員管理" />會員管理</a></li>
    <li><img src="s3.jpg" alt="數據報表" />數據報表</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.menu li {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
    height: 48px;
    padding-left: 60px;
    line-height: 48px;
    color: #999;
    position: relative;
    overflow:hidden;
}
 
.menu img {
    position: absolute;
    top: 0px;
    left: 0px;
}
 
.menu a img {
    top: -48px;
}

觀看範例

Saturday, October 24th, 2009

Category: CSS, Tutorials

Bookmark and Share

6 條評論

2009/10/24

Art Pai

我的習慣是icon不會用img標籤,一律放li或a的背景。如果遇到你的情況,就是a的彩色icon蓋住li的黑白icon,就會達成你的需求了。

2009/10/24

Art Pai

抱歉因為html被檔了,所以重寫好幾次。請刪掉前兩篇和這篇吧。

2009/10/24

underfire

嗯,一般來說圖檔都會放背景,只是這個案例選項多,放背景得多寫二、三十行的code,所以…XD

2009/11/04

IanTing

我也很喜歡這樣的寫法,對設計師來說很省時。但是若以整個開發流程來看,這樣寫反而會增加工程師的負擔,反而拖慢開發進度,未來若有修改需求也較有限制,。因此我個人較偏好將class加在 or 上。

2009/11/04

underfire

針對需求?話說直接放 img 對工程師來說應該是最自由的了,修改完全不需要動到 css,只是個人也不偏愛直接給 img 的模式,感覺像在偷步。

2009/11/10

柏直瓜子

我反而會用 css sprites + 負數的text-indent + padding-left 來處理hyperlink的 mouse over