日々の記録

ほどよく書いてきます。

画像一覧HTML作成のスクリプト

2017年01月23日 00時12分12秒 | プログラム
画像を表にして整理するのに便利なので作ってみた。
観察データを横並びに確認したいときなど、Excelに貼るよりも便利だから。

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

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>画像サムネイル一覧テーブル作成</title>
<style type="text/css">
    .param{
        width:100px;
    }
</style>
<script type="text/javascript">
function MakeTable(){
    var StartTime = new Date();
    var FileNameList = document.form.FileList;
    var htmlOut = document.form.HTMLOut;
    var note = document.form.Note;
    var ChSet = document.form.chrSet.value;
    var ImgDir = document.form.ImgDir.value;
    var LinkDir = document.form.LinkDir.value;
    var ColNum = document.form.TableCol.value;
    var TempText = "";

    FileNameList.value = FileNameList.value.replace(/\r\n/g, "\n");
    FileNameList.value = FileNameList.value.replace(/[\n]+$/g,"").trim(); //最後の改行コード処理
    
    if(FileNameList.value.length===0){
        alert("Input File Names");
    }
    
    else{
        var FileNameArray = FileNameList.value.split("\n");
        TempText += '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\n';
        TempText += '<html>\n<head>\n<meta content="text/html; charset='+ChSet+'" http-equiv="Content-Type">\n';
        TempText += '<style type="text/css">\ntable{\n';
        TempText += '  border-collapse:collapse;\n}';
        TempText += '\ntd{\n';
        TempText += '  border:1px black solid;\n';
        TempText += '  text-align:center;\n}';
        TempText += '\n';
        TempText += '<\/style>\n';
        TempText += '<title>Image Table<\/title>\n<\/head>\n<body>\n\n<table>\n';
        var i = 0;
        var j = 1;
        TempText += '  <tr><td><\/td><td colspan="' + ColNum + '">Image(s)<\/td><\/tr>\n  <tr>\n    <td>Index' + j++ + '<\/td>\n';
        for(i=0;i<FileNameArray.length;i++){
            if((i % ColNum ===0) && (i !== 0 )){
                TempText += '  <\/tr>\n  <tr>\n    <td>Index' + j++ + '<\/td>\n';
            }
        TempText += '    <td><img alt="" src="' + ImgDir + FileNameArray[i] + '" title="' + FileNameArray[i] + '"><\/td>\n';
        }
        if(FileNameArray.length % ColNum !==0){
            for(i=(FileNameArray.length % ColNum); i<ColNum ; i++){
                TempText += '    <td><\/td>\n';
            }
        }
    }
    TempText += '  <\/tr>\n<\/table>\n<\/body>\n<\/html>';
    
    htmlOut.value = TempText;
    
    var StopTime = new Date();
    var dT=StopTime-StartTime;
    note.value = "処理時間:" + dT + "[ms]";

}
</script>
</head>
<body>
	画像サムネイル一覧テーブル作成<br>
	<form name="form" action="post">
		<input type="text" name="ImgDir" value="small/" class="param"><span>:dir of the thumbnail images</span><br>
		<input type="text" name="LinkDir" value="org/" class="param"><span>:dir of the images</span><br>
		<input type="text" name="TableCol" value="11" class="param"><span>:number of columns</span><br>
		<input type="text" name="chrSet" value="sjis" class="param"><span>:charactor set</span><br>
		<textarea name="FileList" cols="40" rows="15">
                </textarea>
		<textarea name="HTMLOut" cols="120" rows="15">HTML output</textarea><br>
		<input type="button" value="Generate" onclick="MakeTable()"><br>
		<textarea name="Note" cols="50" rows="2">Log</textarea><br>
	</form>

</body>

</html>

ジャンル:
ウェブログ
コメント   この記事についてブログを書く
« 降雪 | トップ | メモ »

コメントを投稿

プログラム」カテゴリの最新記事