小さいウィンドウを一つ開き、その新ウィンドウから元ウィンドウを操作します。
新ウィンドウ内のリンクをクリックすると、元ウィンドウの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;
は、リモコンウィンドウの高さを、
それぞれ表しています。
全て、お好きなようにご変更下さい。
|
