ロールオーバーリンク６～画像編３～

ロールオーバーリンク５に続いて画像を使ったロールオーバーのやり方を紹介します。今までは文字部分は画像ではありませんでしたが、今回は文字まで画像にしてしまいます。

１：画像を用意する

今回は次の3枚の画像を用意しました。
　　　　
名前は左から順にroll6-a roll6-b roll6-cとつけてあります。

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

ulタグでメニューと、ロールオーバーリンク5を同時に使用するので、スタイルシートは結構複雑です。 ul#menu liというのはID=menuというulタグの中にあるliタグにのみ使うという意味です。

ul#menu{
    list-style:none;
    width:100%;
}
ul#menu li{
    list-style:none;
    float:left;
    width:81px;
}
ul#menu a{
    display:block;
    width:81px;
    height:21px;
    text-indent:-100px;
    overflow:hidden;
}
a.home{
    background-image:url(../img/roll6-a.gif);
}
a:hover.home{
    background-position:0px -23px;
}
a.mail{
    background-image:url(../img/roll6-b.gif);
}
a:hover.mail{
    background-position:0px -23px;
}
a.photo{
    background-image:url(../img/roll6-c.gif);
}
a:hover.photo{
    background-position:0px -23px;
}

HTMLはこんな感じで書きます。

<ul id="menu">
<li><A href="#" class="home">HOME</A></li>
<li><A href="#" class="mail">MAIL</A></li>
<li><A href="#" class="photo">Photo</A></li>
</ul>

実際に見るとこんな感じです。

liのなかに文字を書いているにもかかわらず、実際には見えませんね。理由は、ul#menu aに書いたtext-indent:-100px;とoverflow:hidden;を使って見えないところに飛ばしているからです。これが今回の最大のポイントです。
ul#menu liのfloat:left;を取れば、縦に並べることができます。
ここまで来るとかなり高等なテクニックの部類に入ります。

使いこなすための＋α

一枚の画像にまとめてしまうことも可能です。

ul#menu2{
    list-style:none;
    width:100%;
}
ul#menu2 li{
    list-style:none;
    float:left;
    width:81px;
}
ul#menu2 a{
    display:block;
    width:81px;
    height:21px;
    text-indent:-100px;
    background-image:url(../img/roll6-d.gif);
    overflow:hidden;
}
a.home2{
    background-position:0px 0px;
}
a:hover.home2{
    background-position:0px -23px;
}
a.mail2{
    background-position:-83px 0px;
}
a:hover.mail2{
    background-position:-83px -23px;
}
a.photo2{
    background-position:-166px 0px;
}
a:hover.photo2{
    background-position:-166px -23px;
}

HTMLはこんな感じで書きます。

<ul id="menu2">
<li><A href="#" class="home2">HOME</A></li>
<li><A href="#" class="mail2">MAIL</A></li>
<li><A href="#" class="photo2">Photo</A></li>
</ul>

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

05年6/26追記・修正

ゲストブックにてMacIEじゃ見えないっすという報告をもらったので、修正案を作りました。
あらゆるブラウザーに対応したい方はこちらを使ってください。。

<ul id="menu2">
<li><A href="#" class="home2">HOME</A></li>
<li><A href="#" class="mail2">MAIL</A></li>
<li><A href="#" class="photo2">Photo</A></li>
</ul>

ul#menu2 aからtext-indent:-100px;とoverflow:hidden;を削除
そして次のスタイルを追加
#menu2 a span{display:none;}

ちなみに上のmenu2はこのMacIE用対策を施してあります。menu1の方も同様の手法で見えるようにできるとおもいます。

一覧へ戻る