写真をクリックすると説明ウインドウが開きます
写真をクリックすると説明ためのサブウインドウが開きます。NN3.0~なら、サブウインドウが他のウインドウの陰に隠れないようにfocus()して手前にくるようにしてあります。サブウインドウ内にクローズボタンも付いてます。
応用 : サブウインドウの中にHTMLが記述できますから、ページを作るようにしてサブウインドウを記述してみましょう。
参照 : function, 変数, window.open, document.write(), document.close(), focus(), onClick,
写真をクリックすると説明ウインドウが開きます
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=x-sjis">
<title></title>
<script language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=3){window.onerror=null};
function winOpen(MSG1,MSG2,W,H){
//サブウインドウオープン
var win13=window.open('',(W+'')+(H+''),'scrollbars=1,width='+W+',height='+H+'');
//ここの括弧の中にサブウインドウ内のHTMLを記述します。
var winhtml = '<html>'
winhtml += '<body bgcolor="#B8860B">'
winhtml += ' <center>'
winhtml += ' <table border="12" width=48%><tr><td>'
winhtml += ' </td></tr></table>'
winhtml += ' <font size=5 face="Osaka,ＭＳ Ｐゴシック">'
winhtml += MSG1
winhtml += ' </font>'
winhtml += ' <br>'
winhtml += ' <font size=4 face="Osaka,ＭＳ Ｐゴシック">'
winhtml += ' <b>'
winhtml += MSG2
winhtml += ' </B>'
winhtml += ' </font>'
winhtml += ' <hr>'
winhtml += ' <form>'
winhtml += ' <input type="button" value=" Close " onClick="self.close()">'
winhtml += ' </form>'
winhtml += ' </center>'
winhtml += ' </body>'
winhtml += ' </html>'
win13.document.write(winhtml)
win13.document.close()
//NN3.0~ならサブウィンドウにフォーカス(手前に)する。
if(navigator.appVersion.charAt(0)>=3){win13.focus()}
}
//-->
</script>
</head>
<body>
<a href="javascript:function voi(){};voi()"
onClick="
msg1='万燈会[8/15]';
msg2='万燈会は毎年8月15日に催される牛久大仏最大の行事です。ライトアップと花火が圧巻で、数万の参詣客で賑わいます。';
winOpen(msg1,msg2,330,180)" >
<img src="MAN11.GIF" border="0"></a>
<br>
写真をクリックすると説明ウインドウが開きます
</body>
</html>
window.openに関する説明はwindow.openをご覧くださいfunction winOpen(MSG1,MSG2,W,H)で、MSG1,MSG2,W,Hの4つの変数を受け取る事のできるwinOpen()という名前の関数を作ります
var winhtml = '<html>'で、変数winhtmlへ'<html>'という文字列を格納します。そして引き続きwinhtml += '<body bgcolor="#B8860B">'と書くことで変数winhtmlの中へ追加されて、winhtmlは'<html><body bgcolor="#B8860B">'を意味するようになります
win13.document.write('xxx')はサブウインドウwin13に'xxx'を書き出す(document.writeする)という意味で、この場合は変数winhtmlの中の文字列を書き出すという意味になります
その次のwin13.document.close()はサブウインドウwin13に'xxx'を書き出すのをやめる(document.closeする)という意味です
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)