CSSテクニック

ロールオーバーリンク5〜画像編2〜

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

1:画像を用意する

今回は用意する画像がポイントになります。
サンプル
このようにロースオーバー前と、ロールオーバー後を一枚の画像に描き込んでしまいます。

2:スタイルシートを書く

ロールオーバーリンク4と違うのは、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;
}

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


一覧へ戻る


Last Modified 2004-11-20 © きくちゃん 2004 - All Rights Reserved