• HOME
  • HTML/CSS
  • 背景画像のちらつきを発生させないロールオーバー

背景画像のちらつきを発生させないロールオーバー

管理人:sofu

CSSのa:hoverを用いて背景画像を切り替えると、画像がちらついたり砂時計のマークが表示されたりします。これはインターネットオプションでインターネット一時ファイルの設定を「Webサイトを表示するたびに確認する」としている方に起こりやすい現象なんですが、このような設定をしている方にも画像をちらつかせずロールオーバーを実現する方法を紹介します。

HTML記述

 
<ul id="menu">
	<li><a href="#">メニュー1</a></li>
	<li><a href="#">メニュー2</a></li>
	<li><a href="#">メニュー3</a></li>
</ul>
 

CSS記述

 
ul#menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 360px;
}
 
ul#menu li {
	float: left;
	margin: 0;
	padding: 0;
	width: 120px;
	background: #EEEEEE url(images/tips/menu_flicker_ov.gif) no-repeat left top;
}
 
ul#menu li a {
	display: block;
	border: 1px solid #DDDDDD;
	padding: 5px 0;
	background: #FAFAFA url(images/tips/menu_flicker_st.gif) no-repeat left top;
	color: #666666;
	font-size: 0.8em;
	line-height: 1.3em;
	text-align: center;
	text-decoration: none;
}
 
ul#menu li a:hover {
	background: none;
	color: #3366FF;
}
 

→ちらつき解消のロールオーバーのサンプル

マウスオーバーした際にマウスオーバー用の画像を読み込むのではなく、2つの画像を重ねておいてマウスオーバーの際にa要素に設定した画像を消すという方法です。これでちらつきなくロールオーバー処理を行う事ができます。

date 2010.10.26
blog comments powered by Disqus

PageTop