ロールオーバーリンク４～画像編１～

ここからは背景に画像を使ってロールオーバーをやってみます。
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を使って余白を取るわけですが、２つほど気をつけることがあります。
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タグでメニューと組み合わせると横型のメニューが出来上がります。

一覧へ戻る