CSS で z-index と背景画像を使った Rollover（ロールオーバー）画像置換

Demo

• rollover1
• rollover2

画像を非表示にした場合はテキストが表示される。

Firefox 2.0.0.20
Firefox 3.0.5
Opera 9.63
IE6
IE7
Google Chrome 1.0.154.46
Safari 3.2.1
で動作を確認。

HTMLタグ

<ul id="list">
    <li id="rollover1"><a href="javascript:void(0);"><span>rollover1</span></a></li>
    <li id="rollover2"><a href="javascript:void(0);"><span>rollover2</span></a></li>
</ul>

CSS コード

/* rollover style */
#list li {
    position: relative;
    float: left;
    z-index: 1;
    width: 100px; height: 25px;
    margin: 0 10px 0 0; padding: 0;
    list-style-type: none;
}
#list li a {
    display: block;
    width: 100px; height: 25px;
}
#list li a span {
    position: relative;
    display: block;
    width: 100px; height: 25px;
    z-index: -1;
    overflow: hidden;
}

#list #rollover1 a {
    background: transparent url(rollover.png) no-repeat left top;
}
#list #rollover1 a:hover {
    background: transparent url(rollover.png) no-repeat -100px top;
}
#list #rollover2 a {
    background: transparent url(rollover.png) no-repeat left -25px;
}
#list #rollover2 a:hover {
    background: transparent url(rollover.png) no-repeat -100px -25px;
}

Rollover 画像 (rollover.png)

CSS で z-index と背景画像を使った Rollover（ロールオーバー）画像置換 : Serendip - Webデザイン・ホームページ制作