Javascriptを用いた簡単なロールオーバー


Javascriptを用いた簡単なロールオーバーの覚書です。

メニューにマウスを乗せると画像が変化します。マウスが離れると元の画像に戻ります。現在位置は他のメニューとは異なる色の画像を表示ます。

»Javascriptロールオーバーのサンプル

HTMLファイル

HTMLファイルの要点をまとめます。

  1. body要素にid属性を設定。id属性値はpage1~pageN※1
  2. メニューを構成するimg要素にid属性を設定。nav1~navN。
  3. メニューを構成するimg要素にonmouseover,onmouseoutイベントハンドラを設定。引数はイベントを発生させたオブジェクト自身(この場合img要素)を表すthisを指定。
  4. 各メニュー項目に対して画像を3種類用意。nav1.gif~navN.gif(通常用), nav1_current.gif~navN_current.gif(現在位置用), nav1_over~navN_current.gif(ロールオーバー用)

※1:Nは数字を表し、メニューの数により変わります。


//メニューが2個の場合のサンプル
<body id="page1">

<p>
	<a href=""><img id="nav1" onmouseover="execover(this)" onmouseout="execout(this)" src="ディレクトリ/nav1_current.gif" /></a>
	<a href=""><img id="nav2" onmouseover="execover(this)" onmouseout="execout(this)" src="ディレクトリ/nav2.gif" /></a>
</p>

Javascriptコード


// マウスオーバー
function execover(obj)
{
	var file = 'ディレクトリパス' + obj.id + '_over.gif';
	obj.src = file;
}

// マウスアウト
function execout(obj)
{
	var nav_id = obj.id;
	var nav_no = nav_id.charAt(nav_id.length - 1);
	var page = document.getElementsByTagName('body')[0];
	var page_id = page.id;
	var page_no = page_id.charAt(page_id.length - 1);
	if(nav_no == page_no) // ナビゲーションIDとページIDが等しい ->現在位置の画像
	{
		var file = 'ディレクトリパス' + obj.id + '_current.gif';
	}
	else // ナビゲーションIDとページIDが等しくない ->通常の画像
	{
		var file = 'ディレクトリパス' + obj.id + '.gif';
	}
	obj.src = file;
}

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。