使用している画像:
TAKU0.GIF
TAKU1.GIF
TAKU2.GIF
TAKU3.GIF
J01ではalertボックスが出てありがとうのメッセージを出しましたが、ここではサブウインドウをひらいてみます。alertボックスと違ってHTMLが記述できますからおもしろいリアクション作りにトライしてみましょう(^0^)/。
ここでは、送信ボタンがおされたらサブウインドウが開き、ありがとうのメッセージが点滅して顔写真がお辞儀します。
optionに付けた都道府県名一覧表もなにかと便利です(^^)/。
J01のNN3.0~用文字化けしない処理とJ03のページタイトル(またはファイル名)を自動添付して送信する処理も入れてあります。
サブウィンドウは次のページへ抜けると自動的に閉じます。
応用:document.write()文の中のHTMLを好きな内容に書き換えてお使いください。TAKUx.GIFの顔写真3枚を取り替えて自分用のウインドウを作りましょう。action="mailto:"の部分をaction="mailto:xx@xxxx.or.jp"のように自分のアドレスを入れて書き換えると送信できるようになります。
参照: onSubmit, bgColor, function, return, window.open(), document, opener, top, clear(), write(), elements[番号], name, value, selectedIndex, text, click(), window.close(), document.close(), onClick, focus(), if( ){ }else{ }, this, onUnload,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=3){ window.onerror=null } ;
//サブウインドウ用の変数を用意
var sbwin = "" ;
//サブウインドウの名前を返すファンクション
function wfl(winName)
{
fl = winName.name + '' ;
return fl ;
}
//ここからこのページ用のファンクションSubmitWin(form)を作り始める。
function SubmitWin(form){
//まずサブウインドウを幅300高さ320の大きさでオープンします。
sbwin = window.open('','sbwin1','toolbar=0,loction=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=300,height=320');
//サブウインドウの中に残っている文字を一度クリアします。
sbwin.document.clear();
//次に、開いたウインドウの中にFORMで入力された内容を出力表示します。
var subhtm = "<html>"
subhtm += "<body bgcolor='ffffff' onLoad='opener.Ojigi()'>"
subhtm += "<center>"
subhtm += "<font size=5>ありがとうございます<p>"
subhtm += "<table border=7 width=1%><tr><td>"
subhtm += "</td></tr></table>"
subhtm += "<br>また来てくださいね(;_;)"
subhtm += "<br><blink>お願いだから...</blink>"
subhtm += "<p><img src='TAKU0.GIF' name='oji'>"
subhtm += "<form>"
subhtm += "<input type=button value=' ごあいさつ ' "
subhtm += " onClick='opener.Ojigi()'>"
subhtm += "<input type=button value=' またくるよっ ' "
subhtm += " onClick='opener.Fun()'>"
//送信し、サブウインドウを閉じる
subhtm += "<input type='button' value=' 送信 ' "
subhtm += " onClick='top.opener.document.f1.submit1.click()'>"
//入力内容の訂正しやすいようにFORMウインドウを手前に表示する
subhtm += "<input type='button' value='入力内容の訂正' "
subhtm += " onClick='top.opener.focus()'>"
subhtm += "</font></center>"
subhtm += "</form>"
subhtm += "</body>"
subhtm += "</html>"
//出力
sbwin.document.write( subhtm )
//出力表示の終わり。忘れると上の行で書いた内容が表示されない事があります。
sbwin.document.close();
//サブウインドウを手前に表示
sbwin.focus()
}
//顔写真お辞儀処理
if(navigator.appVersion.charAt(0)>=3)
{
takuimg=new Array();
takuimg[0]=new Image();takuimg[0].src='TAKU0.GIF';
takuimg[1]=new Image();takuimg[1].src='TAKU1.GIF';
takuimg[2]=new Image();takuimg[2].src='TAKU2.GIF';
takuimg[3]=new Image();takuimg[3].src='TAKU3.GIF';
}
function Ojigi(){ //ごあいさつのリアクション
TID1=setTimeout('sbwin.document.oji.src=takuimg[1].src',50);
TID2=setTimeout('sbwin.document.oji.src=takuimg[2].src',1000);
TID0=setTimeout('sbwin.document.oji.src=takuimg[0].src',2500);
}
function Fun(){ //またくるよっのリアクション
sbwin.document.oji.src=takuimg[3].src;
TID3=setTimeout('sbwin.document.oji.src=takuimg[0].src',1200);
}
//-->
</script>
</head>
<!--ページを抜けるときにもしサブウインドウが開いていたら閉じます---->
<body onunload="if(wfl(sbwin)=='sbwin1'){sbwin.close()}">
<form name="f1"
method="post" action="mailto:xx@xxxx.or.jp"
onSubmit="if(navigator.appVersion.charAt(0)>=3)
{
document.f1.encoding='text/plain';
document.f1.hiddenData.value=document.title;
}">
<input type="hidden" name="hiddenData">
<font size=5 color="#b75939">1</font>●お名前:<br>
<input type="text" name="●お名前" size=40 maxlength=40><br>
<font size=5 color="#b75939">2</font>●郵便番号:<br>
<input type="text" name="●郵便番号" size=8 maxlength=8><br>
<font size=5 color="#b75939">3</font>●都道府県名:<br>
<select name="●都道府県名">
<option selected>都道府県名を選択してください
<option >北海道
<option>青森県
<option>岩手県
<option>宮城県
<option>秋田県
<option>山形県
<option>福島県
<option>茨城県
<option>栃木県
<option>群馬県
<option>埼玉県
<option>千葉県
<option>東京都
<option>神奈川県
<option>山梨県
<option>長野県
<option>新潟県
<option>富山県
<option>石川県
<option>福井県
<option>岐阜県
<option>静岡県
<option>愛知県
<option>三重県
<option>滋賀県
<option>京都府
<option>大阪府
<option>兵庫県
<option>奈良県
<option>和歌山県
<option>鳥取県
<option>島根県
<option>岡山県
<option>広島県
<option>山口県
<option>徳島県
<option>香川県
<option>愛媛県
<option>高知県
<option>福岡県
<option>佐賀県
<option>長崎県
<option>熊本県
<option>大分県
<option>宮崎県
<option>鹿児島県
<option>沖縄県
</select><br>
<font size=5 color="#b75939">4</font>●住所1(市区郡町村):<br>
<input type="text" name="●住所1(市区郡町村)" size=60><br>
<font size=5 color="#b75939">5</font>●住所2(番地など):<br>
<input type="text" name="●住所2(番地など)" size=60><br>
<font size=5 color="#b75939">6</font>●電話:<br>
<input type="text" name="●電話" size=20><br>
<font size=5 color="#b75939">7</font>●ホームページ:<br>
<input type="text" name="●ホームページ"
value="http://" size=60 maxlength=60><br>
<font size=5 color="#B75939">8</font>●E-mail:<br>
<input type="text" name="●E-mail" size=40 maxlength=40><br>
<p>
<input type="button"
name="submit0"
value=" あいさつを見てから(^^)/送信する(Netscape3.0以上) "
onClick="SubmitWin(this.form)">
<input type="submit"
name="submit1"
value=" 急いで送信する ">
<input type="reset"
name="reset1"
value="入力内容のクリア">
</form>
</body>
</html>
使用している画像:
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)