よくサイトのメニューバーで使うことの多いロールオーバーですが、最近はJavascriptではなくCSSを使って処理されている方がほとんどかと思います。
やり方は色々ありますが、私の場合はよく見かける「background-position」を使った方法です。

ただ、以前からIE6でこのロールーオーバー部分を操作する際に画像のちらつきが非常に気になっていました。
原因はロールオーバーしたときに背景画像を再度読み込んでしまっているからです。
IE7やFireFoxでは再読込せずに、キャッシュしている画像を使ってくれますので、気にならないのですが・・・こまったものです。

困っていてもしょうがないので、少しは緩和できないかと手を考えてみました。

私がよくコーディングするメニュー部分のHTMLは以下のような感じ。

<ul>
<li id=”menu1″><a href=”menu1.html”>MENU1</a></li>
<li id=”menu2″><a href=”menu2.html”>MENU2</a></li>
<li id=”menu3″><a href=”menu3.html”>MENU3</a></li>
</ul>

これをCSSを使ってレイアウトして、aタグ内のテキストを「text-indent」で追い出し、aタグを「display:block;」してから背景画像を設定しています。

li {
float: left;
}

li a {
width: 100px;
height: 20px;
display: block;
text-decoration: none;
overflow: hide;
text-indent: -5000px;
}

#menu1 a {
background: url(”images/menu1.gif”) no-repeat;
}

#menu2 a {
background: url(”images/menu2.gif”) no-repeat;
}

#menu3 a {
background: url(”images/menu3.gif”) no-repeat;
}

ul a,
ul a:link,
ul a:visited {
background-position: 0 -20px;
}

ul a:hover,
ul a:active,
ul a:focus {
background-position: 0 -40px;
}

ここで思いついたのですが、aの背景画像がちらつくのはブラウザの問題なのでしょうがないとして、だったらliに背景画像を貼り付ければいけるのではないか？
CSSはこんな感じ (茶色が変更・追加部分)

li {
width: 100px;
height: 20px;
 float: left;
}

#menu1 {
background: url(”images/menu1.gif”) no-repeat;
}

#menu2 {
background: url(”images/menu2.gif”) no-repeat;
}

#menu3 {
background: url(”images/menu3.gif”) no-repeat;
}

li a {
width: 100px;
height: 20px;
display: block;
text-decoration: none;
overflow: hide;
text-indent: -5000px;
}

#menu1 a {
background: url(”images/menu1.gif”) no-repeat;
}

#menu2 a {
background: url(”images/menu2.gif”) no-repeat;
}

#menu3 a {
background: url(”images/menu3.gif”) no-repeat;
}

ul a,
ul a:link,
ul a:visited {
background-position: 0 20px;
}

ul a:hover,
ul a:active,
ul a:focus {
background-position: 0 -40px;
}

これで試してみたところ、うまくいきました。
ちらつきが解消できて良い感じです。

関連記事