Javascriptを用いた簡単なロールオーバーの覚書です。
メニューにマウスを乗せると画像が変化します。マウスが離れると元の画像に戻ります。現在位置は他のメニューとは異なる色の画像を表示ます。
»Javascriptロールオーバーのサンプル
HTMLファイルの要点をまとめます。
※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>
// マウスオーバー
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.
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。