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


メニューをマウスオーバーするとタイトル背景が変わる

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。

今回はこの各メニューにマウスを乗せたとき、タイトルの背景画像を変えるカスタマイズを紹介します。

HTMLを編集します。
<head>~</head>で囲まれた中に以下を加えてください。
または外部ファイルに加えてください。

<script type="text/javascript"><!--

var img = new Array();
img[0]=new Image();img[0].src="画像0のURL";
img[1]=new Image();img[1].src="画像1のURL";
img[2]=new Image();img[2].src="画像2のURL";
img[3]=new Image();img[3].src="画像3のURL";
img[4]=new Image();img[4].src="画像4のURL";

function bgch(x,y){
document.getElementById(x).style.backgroundImage='url('+img[y].src+')';
}

// --></script>


img[5],img[6]・・・と好きなだけ画像を追加できます。

そしてメニューバーのリンクタグ<a>の中に、次の赤い箇所を加えてください。

<ul id="menu_bar">
<li><a href="~" onMouseOver="bgch('header_body','1')" onMouseOut="bgch('header_body','0')">メニュー1</a></li>
<li><a href="~" onMouseOver="bgch('header_body','2')" onMouseOut="bgch('header_body','0')">メニュー2</a></li>
<li><a href="~" onMouseOver="bgch('header_body','3')" onMouseOut="bgch('header_body','0')">メニュー3</a></li>
<li><a href="~" onMouseOver="bgch('header_body','4')" onMouseOut="bgch('header_body','0')">メニュー4</a></li>
</ul>


当サイトが公開している共有テンプレートだと、lightframeシリーズはこのままでよいですが、standardシリーズをお使いの方は header_body の部分を header に書き換えてください。

これでタイトルの背景画像が
メニュー1にマウスを乗せると画像1
メニュー2にマウスを乗せると画像2
メニュー3にマウスを乗せると画像3
メニュー4にマウスを乗せると画像4
そして各メニューからマウスを離すと画像0に変更されます。


【2007/07/30 追記】
サイトを開いた時点でタイトル背景画像を表示するには、スタイルシートで設定する必要があります。
standardの場合はこちら
lightframeの場合はこちら
を参考にしてください。
img[0]と同じ画像を設定すると良いと思います。
関連記事



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

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