別のウインドウを画面全体やフルスクリーンで表示させよう
表示の例
 ボタンを押すと、別のウインドウが画面全体に広がったり、
ボタンなどのないフルスクリーン状態で表示されます。
◆ 別のウインドウを画面全体に広げる ◆
プログラムＡのソースをコピーして、別のウインドウを表示させたいページ（ボタンをつけるページ）のHTMLソースのＨＥＡＤ区間に貼り付けしましょう。
プログラムＡのソース
<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>
プログラムＡのソースの java_maxwin1.html が別のウインドウに表示されるページのアドレス（ファイル名）ですから、あなたの表示させたいページのアドレスにかえてください。
toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes のところは、表示されるウインドウの状態を指定しているところです。yes を no にかえると非表示になりなす。
プログラムＢのソースをコピーして、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムＢのソース
<FORM>
<INPUT type="button" value="画面全体に広げる" title="新しいウインドウが、画面全体に表示されます" onClick="MaxWin()">
</FORM>
２行目の value="画面全体に広げる" の 画面全体に広げる がボタンに表示される文字ですから、あなたの好きな文字にかえてくださいね。
title="新しいウインドウが、画面全体に表示されます" の部分は、マウスポインタが乗ったときに表示されるポップアップ文字ですから、あなたの好きなコメントにかえてください。
※ 動作確認について
ホームページ作成ソフトのプレビューなどでは、ウインドウが表示されるだけになり、プログラムＡのソースで指定したページが表示されないようですから、必ずブラウザで動作確認をしてください。
◆ 別のウインドウをフルスクリーンで表示 ◆
上の「別のウインドウを画面全体に広げる」と同じように、プログラムＡのソースはＨＥＡＤ区間に貼り付けて、プログラムＢのソースは、ボタンを表示させたい場所のＨＴＭＬソースのＢＯＤＹ区間に貼り付けてください。
プログラムＡのソース
<SCRIPT LANGUAGE="JavaScript">
function FullWin() {
window.open("java_maxwin2.html","","fullscreen=yes");
}
//-->
</SCRIPT>
プログラムＢのソース
<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
姉妹サイト「ホームページお役立ち小技集」でも、ボタンの色をかえたりするソースを紹介していますので、よろしかったらご参考になさってください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
５・６年生にもわかるやさしいJavaScriptのTOPへ