別のウインドウを画面全体やフルスクリーンで表示させよう
表示の例
 ボタンを押すと、別のウインドウが画面全体に広がったり、
ボタンなどのないフルスクリーン状態で表示されます。
◆ 別のウインドウを画面全体に広げる ◆
プログラムAのソースをコピーして、別のウインドウを表示させたいページ(ボタンをつけるページ)のHTMLソースのHEAD区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function MaxWin(){
maxWin = window.open("java_maxwin1.html","","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes");
maxWin.moveTo(0,0);
maxWin.resizeTo(screen.availWidth,screen.availHeight);
}
//-->
</SCRIPT>
プログラムAのソースの java_maxwin1.html が別のウインドウに表示されるページのアドレス(ファイル名)ですから、あなたの表示させたいページのアドレスにかえてください。
toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes のところは、表示されるウインドウの状態を指定しているところです。yes を no にかえると非表示になりなす。
プログラムBのソースをコピーして、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムBのソース
<FORM>
<INPUT type="button" value="画面全体に広げる" title="新しいウインドウが、画面全体に表示されます" onClick="MaxWin()">
</FORM>
2行目の value="画面全体に広げる" の 画面全体に広げる がボタンに表示される文字ですから、あなたの好きな文字にかえてくださいね。
title="新しいウインドウが、画面全体に表示されます" の部分は、マウスポインタが乗ったときに表示されるポップアップ文字ですから、あなたの好きなコメントにかえてください。
※ 動作確認について
ホームページ作成ソフトのプレビューなどでは、ウインドウが表示されるだけになり、プログラムAのソースで指定したページが表示されないようですから、必ずブラウザで動作確認をしてください。
◆ 別のウインドウをフルスクリーンで表示 ◆
上の「別のウインドウを画面全体に広げる」と同じように、プログラムAのソースはHEAD区間に貼り付けて、プログラムBのソースは、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けてください。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
function FullWin() {
window.open("java_maxwin2.html","","fullscreen=yes");
}
//-->
</SCRIPT>
プログラムBのソース
<FORM>
<INPUT type="button" value="フルスクリーンで表示" title="新しいウインドウが、フルスクリーンで表示されます" onClick="FullWin()">
</FORM>
フルスクリーンで表示した場合には、ボタン類が表示されませんので、ウインドウを閉じるボタンをつけたほうがいいと思います。
できあがりの例で表示されるページの「CLOSE」ボタンのソースをご紹介しておきますので、コピーしてお使いください。
<FORM><INPUT type="button" value="CLOSE" onClick="window.close()" title="このウインドウを閉じます" style="border-style:solid; border-width:1px; border-color:#6699FF; background:#FFFFFF; font-size:10pt; color:#666666; cursor:hand"></FORM>
色をかえたりする場合には、下の表を参考にしてくださいね。
かえるところ ソースをかえるところ
ボタンの文字 value="CLOSE" の CLOSE
ボタンの外枠の太さ border-width:1px; の 1
ボタンの外枠の色 border-color:#6699FF; の #6699FF
ボタンの背景の色 background:#FFFFFF; の #FFFFFF
ボタンの文字の大きさ font-size:10pt; の 10
ボタンの文字の色 color:#666666; の #666666
姉妹サイト「ホームページお役立ち小技集」でも、ボタンの色をかえたりするソースを紹介していますので、よろしかったらご参考になさってください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ