WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:教えて下さいjavascript

0:[投稿] sakura [MAIL] [URL] [2005/04/03 09:12 ][環境:IE6 わかりません]

下記のようなjavscriptサンプルを捜しています、またはコードを教えて下さい。いろいろと捜したのですが見つかりませんでした。
※画像BBSのように「画像ファイル」の参照と「テキスト」をformで入力して、「OKボタン」を押すと、その出力を別のHTMLページに表示するスクリプト。ワープロソフト等の「差し込みファィル」みたいな物です。
扱うのは「画像ファイル」2枚と複数行の「テキスト」です。単独のアルバムとして そのつどうち出したいので「データベース」といった物ではありません。どうか、よろしくお願いします。


1:[回答] 敬 [MAIL] [URL] [2005/04/03 12:28 ]

適当に改造してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="content-style-type" content="text/css">
    <script type="text/javascript"><!--
        var iLoc1, iLoc2, iTxt, nCont;
        function init() { //変数の設定
            iLoc1 = document.iForm.imgLoc1;
            iLoc2 = document.iForm.imgLoc2;
            iTxt  = document.iForm.imgTxt;
        }
        function createPage() { //画像を表示するウィンドウの生成
            if(!iLoc1.value || !iLoc2.value || !iTxt.value) { //未入力確認
                alert('フォーム未入力');
                return;
            }
            nCont = new Array( //新規ウィンドウの中身
                '<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"',
                '\"http://www.w3.org/TR/html4/strict.dtd\">',
                '<title>画像ページ<\/title>',
                '<p><img src=\"' + iLoc1.value + '\" alt=\"\"><\/p>',
                '<p><img src=\"' + iLoc2.value + '\" alt=\"\"><\/p>',
                '<p>' + iTxt.value + '<\/p>'
            );
            var newWin = window.open();
            newWin.document.write(nCont.join('\n'));
            newWin.document.close();
        }
    //--></script>
    <title>テスト</title>
</head>

<body onLoad="init()">

<h1>テスト</h1>

<form action="." name="iForm">
    <p>
        <label accessKey="M">
            画像を選択する(一枚目)[M]
            <input type="file" name="imgLoc1">
        </label>
    </p>
    <p>
        <label accessKey="G">
            画像を選択する(二枚目)[G]
            <input type="file" name="imgLoc2">
        </label>
    </p>
    <p>
        <label accessKey="T">
            テキストを記入する [T]
            <textarea name="imgTxt"></textarea>
        </label>
    </p>
    <p>
        <input type="button" value="以上の内容でアルバムを作成する [L]" accessKey="L" onClick="createPage()">
    </p>
</form>

</body>

</html>


2:[完了] sakura [MAIL] [2005/04/03 15:16 ]

お世話になり、ありがとうございました。早速利用させてもらいます。
//新規ウィンドウの中身
のデザインを少し変更させてもらいました。コードが不細工かもしれませんが。
nCont = new Array(                    
'<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"',
'\"http://www.w3.org/TR/html4/strict.dtd\">',
                        
'<title>画像ページ<\/title>',
'<table border="1\" width="600\" cellpadding="10\" align="center\">',
'<tr><th>',
 '<p style="font-size:1.5em;font-family:sans-serif\">' + iTxt.value + '<\/p>',
'<\/th><\/tr>',
'<tr><th>',
 '<p><img src=\"' + iLoc1.value + '\" alt=\"\" width="500\"><\/p>',
'<\/th><\/tr>',
'<tr><th>',
 '<p><img src=\"' + iLoc2.value + '\" alt=\"\" width="500\"><\/p>',
'<\/th><\/tr>',
'<\/table>'


3:[完了] 敬 [MAIL] [URL] [2005/04/03 16:19 ]

th要素直下にp要素をおくことはできません。


4:[完了] 敬 [MAIL] [URL] [2005/04/03 18:25 ]

>>3 は勘違いです。無視してください。失礼しました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World