Javascriptを用いた簡単なロールオーバー
Javascriptを用いた簡単なロールオーバーの覚書です。
メニューにマウスを乗せると画像が変化します。マウスが離れると元の画像に戻ります。現在位置は他のメニューとは異なる色の画像を表示ます。
»Javascriptロールオーバーのサンプル
HTMLファイル
HTMLファイルの要点をまとめます。
- body要素にid属性を設定。id属性値はpage1～pageN※1。
- メニューを構成するimg要素にid属性を設定。nav1～navN。
- メニューを構成するimg要素にonmouseover,onmouseoutイベントハンドラを設定。引数はイベントを発生させたオブジェクト自身(この場合img要素)を表すthisを指定。
- 各メニュー項目に対して画像を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.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。