CSSテクニック

ロールオーバーリンク4〜画像編1〜

ここからは背景に画像を使ってロールオーバーをやってみます。
Javascriptでやると結構大変だけど、 スタイルシートを使えばちょちょいのちょいです。

一番簡単な例

背景色のかわりに背景画像を指定しただけです。

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

a:hoberのときだけ違う背景画像を指定すればロールオーバーになります。
このサンプルのように形の決まった画像を使う場合はdisplay:block;を指定して、 widthとheightを画像の幅と高さと同じに、パターン画像なら幅と高さはお好みで。 必要に応じてbackground-repeatを追加してください。
text-align:center;を指定しておくと面倒な計算をしなくてすみます。

余白を取る場合

このサンプルのようにtext-align:center;だと不自然な感じになってしまう画像もあるでしょう。 その場合はpaddingを使って余白を取るわけですが、2つほど気をつけることがあります。
1つ目は標準互換で書くこと。(詳しくはこちら
2つ目はpaddingの値+width(height)の値=画像の横幅(高さ)にすること
です。

a.sample1{
    display:block;
    padding-left:20px;
    padding-top:3px;
    width:61px;
    height:18px;
    background-image:url(../img/roll4-a.gif);
    margin:5px 0px;
}
a:hover.sample1{
    background-image:url(../img/roll4-b.gif);
}

使いこなすための+α

GIFアニメを利用してみるのもいいかもしれませんね。
*GIFアニメはBAMBOO FACTORY ANNEXからお借りしました。

GIFアニメは常時動かしているとチラチラして読みにくいですし、うっとおしく感じる人もいます。 カーソルをのせたときだけ動くようにすると、スマートになります。
ただし、あまりファイルサイズの大きなものを使用するとスムーズに切り替わらないことがあるので、 できるだけ軽いものを選んでください。

a.sample2{
    display:block;
    padding-left:30px;
    padding-top:3px;
    width:61px;
    height:18px;
    background:no-repeat left;
    background-image:url(../img/roll4-ad.gif);
    background-color:#FFFFFF;
    border:solid 2px #CC0000;
    margin:5px 0px;
}
a:hover.sample2{
    background-image:url(../img/roll4-ad2.gif);
}

今回のように使用する画像が小さい場合はbackground:no-repeat left;を使って表示方法を指定する必要があります。

お決まりのパターンですがulタグでメニューと組み合わせると横型のメニューが出来上がります。


一覧へ戻る


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