Serendip

Web Studio

JavaScript を使わずに CSS のみで z-index と 背景画像を使って Rollover（ロールオーバー）画像置換を行うメモ。

text-indent を使ってテキストを不可視領域に移動させて画像置換（Image Replacement）を行うと、画像非表示で CSS 有効の場合に何も表示されない問題があるので、z-index を使って画像置換を行ってみた。

次のスクリーンショットのように、画像を非表示にした場合はテキストが表示される。

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

Demo （デモ）

Demo （デモページ）

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