画像を表にして整理するのに便利なので作ってみた。
観察データを横並びに確認したいときなど、Excelに貼るよりも便利だから。
観察データを横並びに確認したいときなど、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>
アクセス
トータル
