CSSで1枚画像をスライド。ロールオーバーを表示します。

hover時には、CSSで画像を上へスライドすることでマウスオーバーを実装。

通常時とマウスオーバー時の画像を縦にならべて一枚画像を作っておきます。

HTMl

<div class="mod_Rollover001">
<p><a href="#"><img src="Rollover_001.gif" width="220" height="120" alt="ボタン" /></a></p>
<!-- mod_Rollover001_end --></div>

CSS

.mod_Rollover001{
	width:220px;
	height:60px;
	overflow:hidden;
}
.mod_Rollover001 a{
	display:block;
}
.mod_Rollover001 a:link    {}
.mod_Rollover001 a:visited {}
.mod_Rollover001 a:hover   {margin-top:-60px;}
.mod_Rollover001 a:active  {margin-top:-60px;}