ロールオーバーリンク５〜画像編２〜

ロールオーバーリンク４に続いて画像を使ったロールオーバーのやり方を紹介します。 こちらはスタイルシートならではのテクニックになります。 ４に比べるとちょっと難しいですが、やってみる価値はあります。

１：画像を用意する

今回は用意する画像がポイントになります。

このようにロースオーバー前と、ロールオーバー後を一枚の画像に描き込んでしまいます。

２：スタイルシートを書く

ロールオーバーリンク４と違うのは、a:hoverにbackground-positionが加わったことです。 この値は、使用する画像の大きさに合わせて書き換えてください。

a.sample{
    display:block;
    width:81px;
    height:21px;
    background-image:url(../img/roll5-1.gif);
    text-align:center;
    margin:5px 0px;
}
a:hover.sample{
    background-position:0px -23px;
}

実際に使うとこんな感じです。

仕組みを一言でいうと、background-positionをつかって背景画像をずらしているだけです。
今回は背景を上に引き上げる形になるので、値にマイナスを使っています。
背景の位置をpx単位で調整しないときれいに表示されないので、ここに時間がちょっとかかるかもしれません。

---

使いこなすための＋α

a:activeの時の画像も加えて3段変化させることもできます。

a.sample2{
    display:block;
    width:81px;
    height:21px;
    background-image:url(../img/roll5-2.gif);
    text-align:center;
    margin:5px 0px;
    background-position:0px 0px;
}
a:hover.sample2{
    background-position:0px -23px;
}
a:active.sample2{
    background-position:0px -43px;
}

画像を１つにまとめると、使用する画像ファイルの数が減るほか、画像が切り替わるまでのタイムラグを無くす事ができます。 小さなことに見えるかも知れませんが、結構大きなメリットですよ。