ロールオーバーボタンの作成（文字画像切替型）
ドリル式ホームページの作り方TOP >> Lesson8〜floatを使ったレイアウト〜 >> ロールオーバーボタンの作成（文字画像切替型）
visibility:hiddenを利用したロールオーバーボタンのことです。
2枚の文字入り画像を初期の状態で重ねておいて、マウスカーソルが上にのっているときのみ、上にある画像をhidden（隠す）ことで、下の背景画像を表示させあたかも画像が切り替わっているかのように見せるテクニックです。
リスト項目には、文字でなく、文字入り画像を配置します。
<html>
<head>
<title>ロールオーバー２</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<ul id="a2">
<li><a href="#"><img src="gif/49.gif" alt="" /></a></li>
<li><a href="#"><img src="gif/49.gif" alt="" /></a></li>
<li><a href="#"><img src="gif/49.gif" alt="" /></a></li>
</ul>
</body>
</html>
ついで、スタイルを以下のように指定します。マウスを当てたときに、上の画像が隠れる仕組みです。
ul#a2 li {
float:left;
width:150px;
height:40px;
display:inline;
list-style-type:none;
}
ul#a2 li a {
display:block;
position:relative;
background:url(../gif/50.gif) no-repeat;
}
ul#a2 li a:hover {
background-color:#fff;
}
ul#a2 li a:hover img {
visibility:hidden;
}
サンプル画像はコチラ→サンプル（ロールオーバー２）
onmouseoverとonmouseoutを使用（javascriptなのかな？）したロールオーバーボタン作成法です。
この方法はスタイルシートを使わずに、imgにonmouseoverとonmouseout画像を指定するだけでできるので、一番簡単な方法なのかもしれません。
<html>
<head>
<title>ロールオーバー３</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<ul id="a3">
<li><a href="#"><img src="../gif/49.gif" alt="ホーム" onmouseover="this.src='../gif/50.gif'" onmouseout="this.src='../gif/49.gif'" /></a></li>
<li><a href="#"><img src="../gif/49.gif" alt="ホーム" onmouseover="this.src='../gif/50.gif'" onmouseout="this.src='../gif/49.gif'" /></a></li>
<li><a href="#"><img src="../gif/49.gif" alt="ホーム" onmouseover="this.src='../gif/50.gif'" onmouseout="this.src='../gif/49.gif'" /></a></li>
</ul>
</body>
</html>
サンプル画像はコチラ→サンプル（ロールオーバー３）