i-design « CSS Image Rollover 延伸應用

CSS Image Rollover 延伸應用

因為案子實際需求所延伸出來的應用技巧，而骨子裡用的就是 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>。

<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>

.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