CSS でロールオーバー その２
前回はボタンに背景画像を使って、その背景画像をロールオーバーさせるということをしてみました。 その続きです。
背景に画像を使おう その２
前回ボタンの背景に画像を使用しました。ロールオーバーで使用する場合には、あらかじめ読み込んでおかないと、一番最初に画像が表示されない場合があります。
それを防ぐためには、プリロード（先読み）が必要です。しかし、面倒くさいです。
もともと表示されている画像をロールオーバーの :hover :active に使用すればタイムラグは発生しません。もともと表示されているものを使うという事は、プリロードをする必要もありません。おまけに、とても簡単です。
だったら、それを使いましょう。
今回使用する背景は前回と同様でこの３種類です。
あらかじめ表示されている画像を使用すればタイムラグが発生しないという事で、このまま前回のボタンを表示させればもちろん、タイムラグは発生しません。
これで一件落着？ もちろん違います。
答えは、「背景画像に最初から３種類を表示させておく」が正解です。
使用する画像は↑↑↑これです。
ボタンの背景画像としてつかっても、はみ出してしまいます。
はみ出した部分は表示されません。その「表示される場所」と「表示されない場所」を変えてあげることで、画像が変わっているように見せることができます。
HTML
<div class="linktest_05"> <a>TEST A</a> <a>TEST B</a> <a>TEST C</a> <br /> </div>
CSS
.linktest_05 a {
font-size: 12px;
font-weight: bold;
background-image: url(img/roll_over_back3.png);
text-align: center;
width: 100px;
height: 30px;
text-decoration: none;
line-height: 30px;
display: block;
color: #FFF;
float: left;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.linktest_05 a:hover {
color: #ffffe0;
background-position: 0px -30px;
}
.linktest_05 a:active {
color: #ff0;
background-position: 0px -60px;
}
.linktest_05 br {
clear: both;
}
今回のポイントは background-position です。
background-position は背景画像を任意の場所から表示させることができます。
記載方法は background-position: X Y; です。
上の例では、通常時は 0 0（左上から）、 hover時は 0 -30 、active時は 0 -60 、となっています。
ボタンの高さが30pxに設定してあり、背景画像も30pxごとに変化しているので、30pxずつ動かせば余計な部分が見えることはありません。