JavaScript External File
JavaScript 外部ファイルについて     サイト内検索とヘルプ   

Rollover and SubMenu JS Code

メニュー部分をすべて外部ファイルにした例に戻る    


/****************************************
 Rollover and SubMenu JavaScript
****************************************/

// 画像をあらかじめ読み込む（プレロード）設定
var img = new Array();
img[0] = new Image();img[0].src = "img/e-1.gif";
img[1] = new Image();img[1].src = "img/e-1o.gif";

img[2] = new Image();img[2].src = "img/e-2.gif";
img[3] = new Image();img[3].src = "img/e-2o.gif";

img[4] = new Image();img[4].src = "img/e-3.gif";
img[5] = new Image();img[5].src = "img/e-3o.gif";


/********** ここから変更しない **********/
function change_image(name,num) {
	document.images[name].src = img[num].src;
}
/********** ここまで変更しない **********/


/********** ここから各自変更すること **********/
// Menu 部分のスタイルシート設定
document.write('<style type="text/css">',
	'img {border-style:none;}',
	'.menu {position:absolute;visibility:hidden;font-size:80%;}',
	'.menulink {background-color:inherit;color:#000000;padding-left:12px;vertical-align:middle;}',
	'.menulink {background:#D9EFFF;}', // SubMenu の背景色設定
	'.menulink a:link {background-color:inherit;color:#000000;text-decoration:none;}',
	'.menulink a:visited {background-color:inherit;color:#000000;text-decoration:none;}',
	'.menulink a:active {background-color:inherit;color:#000000;text-decoration:none;}',
	'.menulink a:hover {background-color:inherit;color:#000000;text-decoration:none;}',
	'.headermenu a:hover {position:relative;top:2px;left:1px;}',// HeaderMenu にカーソルが重なったときに動く処理設定
	'.menulink a:hover {position:relative;top:2px;left:1px;}',// SubMenu にカーソルが重なったときに動く処理設定
'<\/style>');


// ここから Menu 部分の記述
var colorset1 = "onMouseOver=\"style.background='#429BF4'\""; // SubMenu にカーソルが重なったときの background 色設定
var colorset2 = "onMouseOut=\"style.background='#D9EFFF'\""; // SubMenu からカーソルが離れたときの background 色設定

document.write('<table border="0" cellspacing="0" cellpadding="0"><tr><td colspan="3">',
'<img src="img/title2.gif" width="495" height="51" alt="JavaScript External File">',// タイトル画像
'<\/td><\/tr>',
'<tr><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu1",1,81);change_image("images01",1); onmouseout=hide();change_image("images01",0); onclick=return false;><img src="img/e-1.gif" width="165" height="30" name="images01" alt="Contents-1"><\/a>',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu2",165,81);change_image("images02",3); onmouseout=hide();change_image("images02",2); onclick=return false;><img src="img/e-2.gif" width="165" height="30" name="images02" alt="Contents-2"><\/a>',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu3",330,81);change_image("images03",5); onmouseout=hide();change_image("images03",4); onclick=return false;><img src="img/e-3.gif" width="165" height="30" name="images03" alt="Contents-3"><\/a>',
'<\/td><\/tr><\/table>',

'<div id="menu1" class="menu">',
	'<table width="165" border="0" cellspacing="0" cellpadding="0"><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="http://ip.tosp.co.jp/Kj/Tospi200.asp?I=bisoy2&P=0&Kubun=K2&Count=30&HK=N&LogFlg=selected" target="_blank">・BBS Sample 1-1<\/a><\/td>',
	'<\/tr><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="http://ip.tosp.co.jp/Kj/Tospi200.asp?I=bisoy4&P=0&Kubun=K1&Count=30&HK=N&LogFlg=selected" target="_blank">・BBS Sample 1-2<\/a><\/td>',
	'<\/tr><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="http://ip.tosp.co.jp/Kj/Tospi200.asp?I=bisoy4&P=0&Kubun=K4&Count=10&HK=N&LogFlg=selected" target="_blank">・BBS Sample 1-3<\/a><\/td>',
	'<\/tr><\/table>',
'<\/div>',
'<div id="menu2" class="menu">',
	'<table width="165" border="0" cellspacing="0" cellpadding="0"><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="../externalfile/custombbs_sample1.html" target="_blank">・BBS Sample 2-1<\/a><\/td>',
	'<\/tr><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="../externalfile/custombbs_sample2.html" target="_blank">・BBS Sample 2-2<\/a><\/td>',
	'<\/tr><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="../externalfile/custombbs_sample3.html" target="_blank">・BBS Sample 2-3<\/a><\/td>',
	'<\/tr><\/table>',
'<\/div>',
'<div id="menu3" class="menu">',
	'<table width="165" border="0" cellspacing="0" cellpadding="0"><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="http://ip.tosp.co.jp/Kj/Tospi200.asp?I=BAYANI&Kubun=K3&Count=35&HK=N&LogFlg=selected" target="_blank">・BBS Sample 3-1<\/a><\/td>',
	'<\/tr><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="http://ip.tosp.co.jp/Kj/Tospi200.asp?I=BAYANI3&P=0&Kubun=V5&Count=10&HK=N&LogFlg=selected" target="_blank">・BBS Sample 3-2<\/a><\/td>',
	'<\/tr><tr>',
	'<td class="menulink" '+colorset1+' '+colorset2+'><a href="http://ip.tosp.co.jp/Kj/Tospi200.asp?I=BAYANI&P=0&Kubun=K2&Count=10&HK=N&LogFlg=selected" target="_blank">・BBS Sample 3-3<\/a><\/td>',
	'<\/tr><\/table>',
'<\/div>');
/********** ここまで各自変更すること **********/


/********** ここから変更しない **********/
var current="",timer,ready = false,ie,nn,d1,op;

function popupmenu(e,id,menux,menuy){
	hidemenu();
	current = id;
	if(timer)clearTimeout(timer);
	if(ie||op)e = window.event;
	if(!menux||!menuy){
		if(ie||op){
			menux = e.clientX+document.body.scrollLeft;
			menuy = e.clientY+document.body.scrollTop;
		}
		else{
			menux = e.pageX;
			menuy = e.pageY;
		}
	}
	if(ie||d1){
		with(document.all(id)){
			style.left = menux;
			style.top = menuy;
			style.visibility = "visible";
		}
	}
	else if(nn){
		with(document.layers[id]){
			left = menux;
			top = menuy;
			visibility = "show";
		}
	}
}

var doposcheck = false;

function poscheck(e){
	if(doposcheck){
		if(ie||op)e = window.event;
		var l,t,w,h,x,y;
		if(ie||d1){
			l = document.all(current).offsetLeft;
			t = document.all(current).offsetTop;
			w = document.all(current).offsetWidth;
			h = document.all(current).offsetHeight;
			x = eval("e.clientX+"+(op&&!document.createTextNode?0:ie?"document.body.scrollLeft":"window.pageXOffset"));
			y = eval("e.clientY+"+(op&&!document.createTextNode?0:ie?"document.body.scrollTop":"window.pageYOffset"));
			if(x<l||x>l+w||y<t||y>t+h)hidemenu();
		}
		else if(nn){
			l = document.layers[current].left;
			t = document.layers[current].top;
			w = document.layers[current].document.width;
			h = document.layers[current].document.height;
			if(e.pageX<l||e.pageX>l+w||e.pageY<t||e.pageY>t+h)hidemenu();
		}
	}
}

function hidemenu(){
	if(current!=""){
		if(ie||d1)document.all(current).style.visibility = "hidden";
		else
		if(nn)document.layers[current].visibility = "hide";
		doposcheck = false;
	}
}

function hide(){
	if(!ready){
		timer = setTimeout("hide();doposcheck=true",100);return;
	}
	timer = setTimeout('if(!doposcheck){hidemenu()}',1000);
}

function initmenu(){
	ie = !!document.all;
	nn = !!document.layers;
	d1 = !!document.getElementById;
	op = !!window.opera;
	if(!ie&&d1)
	document.all = function(id){
		return document.getElementById(id);
	}
	if(!(ie||d1||nn))return;
	if(nn)document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = poscheck;
	var over = function(e){
		doposcheck = true;if(nn&&e.target.constructor!=Layer)document.routeEvent(e);
	}
	for(i=1;;i++){
		if((nn&&!document.layers["menu"+i])||(!nn&&!document.all("menu"+i)))break;
		if(nn){
			document.layers["menu"+i].captureEvents(Event.MOUSEOVER);
			document.layers["menu"+i].onmouseover = over;
		}
		else{
			document.all("menu"+i).onmouseover = over;
		}
	}
	ready = true;
}
window.onload = initmenu;
/********** ここまで変更しない **********/


// JavaScript External File
// http://external-file.com/
// Reconstruction by bisoy

メニュー部分をすべて外部ファイルにした例に戻る    

 | サイトマップ  | WEB BBS  | 音楽 (BGM) 用、タグ  | 改造 スクリプト ランド  | 相互リンク集  | HOME | 

Modified by bisoy - (C)2010 bisoy.

 | Contact us at Feedback  | SitePolicy | 

Last Update: 11 / 30 / 2010 21:05:07 JST

 | 子連れ ヘラブナ釣り  | ひかる君の写真集  | Bayani  | Balita  | Bagong Bayani  | Directory  | herabuna.org  | Web BBS  | JS File |