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