WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
DHCICVbv

■ JavaScript - サンプル集(257種類) - リンク
   - リモコン

小さいウィンドウを一つ開き、その新ウィンドウから元ウィンドウを操作します。
新ウィンドウ内のリンクをクリックすると、元ウィンドウのURLを変更します。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	my_urls=new Array();
	my_mojis=new Array();

	//1つ目のリンクの文字を指定する
	my_mojis[0]="JavaScript";
	//1つ目のリンクのURLを指定する
	my_urls[0] ="../../index.html";

	//2つ目のリンクの文字を指定する
	my_mojis[1]="サンプル集(リンク)";
	//2つ目のリンクのURLを指定する
	my_urls[1] ="../../lib_link.html";

	//3つ目のリンクの文字を指定する
	my_mojis[2]="基礎講座";
	//3つ目のリンクのURLを指定する
	my_urls[2] ="../../kiso_basis.html";

	//4つ目のリンクの文字を指定する
	my_mojis[3]="サンプル集(リンク)";
	//4つ目のリンクのURLを指定する
	my_urls[3]="../../lib_link.html";

	//5つ目のリンクの文字を指定する
	my_mojis[4]="JavaScript";
	//5つ目のリンクのURLを指定する
	my_urls[4] ="../../index.html";

	//リモコンウィンドウのタイトルを指定する
	my_title="リモコン";

	//リモコンウィンドウの文字色を指定する
	text_color      ="#5c2c04";

	//リモコンウィンドウの背景色を指定する
	background_color="#f2e3ca";

	//リモコンウィンドウのlink色を指定する
	link_color      ="#1f5484";

	//リモコンウィンドウのvlink色を指定する
	vlink_color     ="#c63f22";

	//リモコンウィンドウのalink色を指定する
	alink_color     ="#bdb76b";

	//リンクの背景色1を指定する
	th_color1="#f1bf6e";

	//リンクの背景色2を指定する
	th_color2="#f7c7b3";

	//リモコンウィンドウの横幅を指定する
	my_width=220;

	//リモコンウィンドウの高さを指定する
	my_height=250;

	//リモコンウィンドウの閉じるボタンの文字を指定する
	button='Close';

	my_body ='<body text="'+text_color+'" bgcolor="'+background_color+'" link="'+link_color;
	my_body+='" vlink="'+vlink_color+'" alink="'+alink_color+'">';
	my_style="width="+my_width+",height="+my_height+",scrollbars=yes";
	mojis='';
	function my_remote()
		{
		mojis ='<html><head><title>'+my_title+'<\/title>';
		mojis+='<script language="JavaScript">\n';
		mojis+='function idous(doko){window.opener.location.href=doko;}';
		mojis+='<\/script>\n';
		mojis+='<\/head>'+my_body+'<table cellpadding="5" border="1">';
		for(i=0; i<my_urls.length; i++)
			{
			if(i%2 == 0)
				mojis+='<tr><td bgcolor="'+th_color1+'">';
			else 
				mojis+='<tr><td bgcolor="'+th_color2+'">';
			mojis+='<a href="JavaScript:idous('+"'"+my_urls[i]+"'"+');">'+my_mojis[i]+'<\/a><\/td><\/tr>';
			}
		mojis+='<\/table><form><input type="button" onClick="window.close();" value="'+button+'"><\/form>';
		mojis+='<\/body><\/html>';

		my_win=window.open("","",my_style);
		my_win.document.open();
		my_win.document.write(mojis);
		my_win.document.close();
		}

//-->
</script>

</head>

<body>

<a href="JavaScript:my_remote();">クリック!</a>

 ・
 ・
 ・

</body></html>


[ 解説 ]

まずリモコン内に表示するリンクのURL情報と、文字情報を設定します。
上から7〜16行目に設定します。

my_mojis[0]="HOME";
my_urls[0] ="../../index.html";
で、1組です。

上の行に表示したい文字列、下の行にリンク先のURLをご記入下さい。
同じ要領で、他のリンク情報も変更してください。

もしリンク情報を減らしたい場合は、リンク情報の下の行から削除していきます。
必ず、1組(2行)削除するようにしてください。

例えば、サンプルからリンク情報を1つ削除すると以下のようになります。

変更前変更後
my_mojis[0]="HOME";
my_urls[0] ="../../index.html";
my_mojis[1]="JavaScript";
my_urls[1] ="../../index.html#JavaScript";
my_mojis[2]="Library(Link)";
my_urls[2] ="../lib_link.html";
my_mojis[3]="Information";
my_urls[3]="../../kisoku.html";
my_mojis[4]="Link";
my_urls[4] ="../etc_link.html";
my_mojis[0]="HOME";
my_urls[0] ="../../index.html";
my_mojis[1]="JavaScript";
my_urls[1] ="../../index.html#JavaScript";
my_mojis[2]="Library(Link)";
my_urls[2] ="../lib_link.html";
my_mojis[3]="Information";
my_urls[3]="../../kisoku.html";

反対にリンク情報を増やす時は、同じ形式の2行を増やして、必要な情報を書き換えます。

そして必ず、前の方にある数値を書き換える必要があります。

例えばサンプルの1番下のリンク情報は
my_mojis[4]="Link";
my_urls[4] ="../etc_link.html";
です。

先頭部分をみると、「4」の数値があります。
この数値を、1つ繰り上げて「5」にします。

サンプルに1つリンク情報を追加するとどうなるか、以下をご覧下さい。

変更前変更後
my_mojis[0]="HOME";
my_urls[0] ="../../index.html";
my_mojis[1]="JavaScript";
my_urls[1] ="../../index.html#JavaScript";
my_mojis[2]="Library(Link)";
my_urls[2] ="../lib_link.html";
my_mojis[3]="Information";
my_urls[3]="../../kisoku.html";
my_mojis[4]="Link";
my_urls[4] ="../etc_link.html";
my_mojis[0]="HOME";
my_urls[0] ="../../index.html";
my_mojis[1]="JavaScript";
my_urls[1] ="../../index.html#JavaScript";
my_mojis[2]="Library(Link)";
my_urls[2] ="../lib_link.html";
my_mojis[3]="Information";
my_urls[3]="../../kisoku.html";
my_mojis[4]="Link";
my_urls[4] ="../etc_link.html";
my_mojis[5]="Diary";
my_urls[5] ="../../diary/frame.html";

次に、細部を設定していきます。

リモコンウィンドウのタイトルを変更する場合は、上から18行目の
my_title="リモコン";
の「リモコン」の文字を書き換えてください。

次の行の
text_color ="#5c2c04";
は、リモコンウィンドウの文字色、
background_color="#f2e3ca";
は、リモコンウィンドウの背景色、
link_color ="#1f5484";
は、リモコンウィンドウのリンク色、
vlink_color ="#c63f22";
は、リモコンウィンドウの読み込み済みリンク色、
alink_color ="#bdb76b";
は、リモコンウィンドウの読み込み中リンク色
を、それぞれ表しています。

上から25行目と26行目にある
th_color1="#f1bf6e";
th_color2="#f7c7b3";
は、リモコンウィンドウ内のリンクの背景色を表しています。

上から27行目にある
my_width=180;
は、リモコンウィンドウの横幅を、
上から28行目にある
my_height=230;
は、リモコンウィンドウの高さを、
それぞれ表しています。

全て、お好きなようにご変更下さい。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.