以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-231.htmlより取得しました。


メニューバーの画像ロールオーバー

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューの背景を画像にしてロールオーバーさせるカスタマイズを紹介します。ロールオーバーとはマウスを乗せたときに画像が変わることです。

通常画像とマウスオーバー画像の2つを切り替えて表示しようとすると、マウスオーバーしてから画像を読み込むために一瞬遅れて画像が表示されます。

このタイムラグを解消するために、1つの背景画像の「見える部分」を制御して、画像のロールオーバーを実現します。

まずメニューに表示したい画像を用意します。
メニューのサイズにあわせた画像を用意してください。
Sample A
sample0703_01.jpg

そしてマウスを乗せたときに表示したい画像を用意します。
Sample B
sample0703_02.jpg

これを画像編集ツール等を使って1つの画像にしてください。
Sample C
sample0703_03.jpg

画像を1つに編集できたらそのファイルをアップロードしてください。
そしてスタイルシートの末尾に以下を加えてください。

/* メニュー画像 */
#menu_bar li a {
background-image: url("Sample C に相当する画像のURL");
}

/* ロールオーバー(画像切り替え) */
#menu_bar li a:hover {
background-position:left bottom;
}


リンク部分ではないメニューバー全体の背景も画像にしたい場合は、更に以下も追加してください。
Sample Aに相当するような画像がいいかも知れません。

/* メニュー全体背景 */
#menu_bar {
background-image: url("メニュー全体背景に使う画像のURL");
}



メニュー画像を個別に設定したい場合


HTMLを編集します。
変更を加えたいメニューに適当なクラス名を設定してください。
ここでは例としてmenu01,menu02,menu03と設定します。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li class="menu01"><a href="#">メニュー1</a></li>
<li class="menu02"><a href="#">メニュー2</a></li>
<li class="menu03"><a href="#">メニュー3</a></li>
</ul>
<!--▲ メニューバー ▲-->


そしてスタイルシートの末尾に以下を加えてください。
各クラス名に画像を設定します。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
}


用意した画像自体に文字がある場合、画像の上に表示されるリンクテキストは不要になります。
そのようなときには「text-indent:-9999px;」を加えてください。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
text-indent:-9999px;
}



これでメニューバーの画像ロールオーバーができます。

関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-231.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14