データバインドを利用したCSVファイルからの画像表示スクリプト例
- CSVファイルからの読取についてのスクリプト例を紹介します。データバインドを利用して、CSVファイルに記入された画像名を取得し、それを表示させることができます。
- CSVファイルのレコード数分、ループして画像とデータを表示するため、表示が重複することがあります。ループしないようにするには、条件分岐を加える必要があります。
- 以下のソースコードは、データバインドを利用したCSVファイルからの画像表示スクリプト例です。ソースコード内の条件分岐を調整することで、ループしないようにすることができます。
- ベストアンサー
CSVファイルからの読取について
よろしくお願いします。 データバインドを利用し、CSVファイルにて画像名を記入し、それを 表示させるスクリプト例をこのカテゴリで拝見し、試してみました。 問題なく表示できたのですが、CSVファイルのレコード数分、どうしてもループして表示されます。レコード数分ループしないようにするには どこを注目すればよろしいでしょうか？ 以下が参考して、若干手を加えたソースです。 ------------------------------------------------------------ <html> <head> <title>TEST CSV IN</title> </head> <body> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="sample.csv"> <param name="UseHeader" value="true"> </object> <script language="JavaScript"> <!-- document.writeln("<table border=1 DATASRC='#TEST'><tr>"); TEST.Reset(); var rs = TEST.recordset; var Cnt = 0; while (rs.EOF == false){ if(Cnt++ % 3 == 0 && Cnt > 0) document.writeln("</tr><tr>"); document.writeln("<td><img src=" + rs.fields(0) + "></td>"); document.writeln("<td>" + rs.fields(1) + "</td>"); document.writeln("<td>" + rs.fields(2) + "</td>"); rs.MoveNext; } document.writeln("</tr></table>"); --> </Script> </body> </html> -------------------------------------------------- CSVファイルの内容は以下 img,name,phone img/a01.jpg,a01,001-001 img/a02.jpg,a02,002-002 img/a03.jpg,a03,003-003 img/a04.jpg,a04,004-004
- hajimete-san
- お礼率60% (35/58)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
うーん。イマイチ何が望まれているのか良くわからん。 後述の通り、わかりやすく書いてくれ。 俺の環境ではエラーが出てマトモに動かなかったので 当方のIE 7で動くよう、コードを書き換えた。 (この仕組みはIEの独自拡張と思われるのでFirefox,Opera,Safari等への対応はしない。 セキュリティは中高に設定した。) (元々独自拡張なのでDOCTYPEは省略した。自分でDTD作るの面倒くさいし。) ===========================Q3163593-1.html====================== <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); /* var Cnt = 0; 不要*/ var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ /* if(Cnt++ % 3 == 0 && Cnt > 0){ */ ここは不要。 var tr = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); tr.appendChild(tds[0]); tr.appendChild(tds[1]); tr.appendChild(tds[2]); tbody.appendChild(tr); rs.MoveNext; /* } 当然不要 */ } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="sample.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> CSVファイル(多少改変) 'img','name','phone' 'img/a01.jpg','a01','001-001' 'img/a02.jpg','a02','002-002' 'img/a03.jpg','a03','003-003' 'img/a04.jpg','a04','004-004' 'img/a05.jpg','a05','005-005' 'img/a06.jpg','a06','006-006' 'img/a07.jpg','a07','007-007' 'img/a08.jpg','a08','008-008' 出力結果 img/a01.jpg a01 001-001 img/a02.jpg a02 002-002 img/a03.jpg a03 003-003 img/a04.jpg a04 004-004 img/a05.jpg a05 005-005 img/a06.jpg a06 006-006 img/a07.jpg a07 007-007 img/a08.jpg a08 008-008 ↑こんな感じで希望する出力結果を書いてくれ 一例として 希望出力結果例 img/a03.jpg a03 003-003 img/a06.jpg a06 006-006 を考えるなら /* (前略) */ var Cnt = 1; /* 0を1にした */ /* (中略) */ while (!rs.EOF){ if(Cnt % 3 == 0 && Cnt > 0){ /* コメント外す。Cnt++をCntにした。 */ var tr = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); tr.appendChild(tds[0]); tr.appendChild(tds[1]); tr.appendChild(tds[2]); tbody.appendChild(tr); } /* コメント外す */ rs.MoveNext; /* 外に出す【重要】 */ Cnt++; /* 単に個人的な見易さの都合でここに移動 */ } table.appendChild(tbody); output.appendChild(table); } となる。
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
もう一箇所 /* if(Cnt++ % 3 == 0 && Cnt > 0){ */ ここは不要。 /* if(Cnt++ % 3 == 0 && Cnt > 0){ ここは不要。*/ まぁどのみち、 コメントだから行ごと削除してもらってもかまわないんだけど。
- himajin100000
- ベストアンサー率54% (1660/3060)
#やべ、ミスった。 img/a01.jpg じゃなくてimg要素が表示されるんだった(俺の検証時は面倒くさくて画像を作っていないのでつい。まぁそれでもalt属性は空文字列なのでやっぱり俺の記述はおかしいのだけれど。)
関連するQ&A
- 記述方法について
よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる くま さる ごりら これらを→ごりら うま うま りす りす というように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか？ 以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){ var tr = document.createElement("tr"); trs[0] = document.createElement("tr"); trs[1] = document.createElement("tr"); trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので 大変申し訳ありませんが、ご指導願えればと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- IE9でIE8で表示されていたFlashがずれる
IE8ではちゃんと表示されていたFlashが IE9ではFlashの右と下に1pxの余白ができてしまいました。 サイズを測るとFlashが実際より縦横1px小さく表示されており 残りの1pxが右はhtmlの背景、下はFlashの背景が表示されています。 いったいなぜ？と不思議なのですが、 コードは下記を書いています。 （html部分） <table width="500" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="10"><img src="jpg01.jpg" width="10" height="150" border="0"></td> <td width="150"><script type="text/JavaScript" src="common/flash.js"></script></td> <td width="340"><img src="jpg02.jpg" width="340" height="150" border="0"></td> </tr> </table> <table width="500" cellspacing="0" cellpadding="0" border="0"> <tr><td><img src="jpg03.jpg" width="500" height="100" border="0"></td></tr> </table> （flash.js） document.open(); document.writeln('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="150" height="150" id="flash" align="middle">'); document.writeln('<param name="allowScriptAccess" value="sameDomain" />'); document.writeln('<param name="movie" value="common/flash.swf" />'); document.writeln('<param name="quality" value="high" />'); document.writeln('<param name="bgcolor" value="#ffffff" />'); document.writeln('<embed src="common/flash.swf" quality="high" bgcolor="#ffffff" width="150" height="150" name="flash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.writeln('</object>'); document.close(); 以上です。 Flashのバージョンが古いのですが、IE9との相性が悪いのでしょうか？ 困っております。よろしくお願いいたします。
- 締切済み
- Windows Vista
- csvファイルの内容を絞り込みたいのですが
csvファイルの内容を絞り込んで表示させようと思っているのですが、うまくいきません。考えて色々やって見たのですが出来ないので、どなたかアドバイスを頂けないでしょうか。 <form name="myFORM"> 人数を選択してください <select name="myNinzuu"> <option selected value=1>1人 <option value=2>2人 <option value=3>3人 </select> <input type="button" value="データを表示" onClick="window.open('data.html','_blank')" /> </form> ------------------data.html------------------------ <html> <script type="text/javascript"><!-- var Sanka = new Array[iti,ni,san]; var Index = document.myFORM.myNinzuu.value; if(window.opener.myFORM.Ninzuu.value){ document.write('<object id="myDatabase" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">'); document.write('<param name="DataURL" value="data.csv">'); document.write('<param name="UseHeader" value="true">'); document.write('</object>'); } --></script> <body> <table datasrc="#myDatabase" id="myTBL"> <tr> <td><DIV datafld="ikisaki"></DIV></td> <td><DIV datafld="Sanka[Index]"></DIV></td> </tr> </table> </body></html> ------------------csvファイル------------------------ ikisaki,iti,ni,san, 東京,28000,54000,75000, 名古屋、15000,28000,40000, 広島、18000,23000,47000, 所々消したので文法的に大間違いがあるかもしれませんが・・・ csvファイルのx軸を絞り込みたいのです。 まだまだ勉強不足でわかってないところが多く、根本的に間違っているかもしれませんが、その辺の指摘も含めてお願いします。
- ベストアンサー
- JavaScript
- javascriptのカルーセル
配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>
- ベストアンサー
- JavaScript
- [JavaScript]Table内の文字列書換
下記のようにTableを作り、上に場所名、下に画像を貼り JavaScriptで反時計回りに定期的に場所名と画像の位置を変えるプログラムを作成しています。 画像位置を変えることはできたのですが、文字列を変えることができません。 どなたかご教示ください。 ===================================== | 場所A | 場所B | ================= =================== | | | | | 画像B | | | | | 画像 A =================== | | 場所C | | =================== | | | | | 画像C | | | | | =================== | | 場所D | | =================== | | | | | 画像D | | | | ===================================== <HTML> <HEAD> <TITLE>TEST</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8"> <META HTTP-EQUIV="refresh" CONTENT="50"> </HEAD> <BODY BGCOLOR="000000" TEXT="#FFFFFF"> <table ALIGN="CENTER" border="5" > <tr><td>A</td><td>B</td></tr> <tr><td rowspan=5><IMG SRC="A.jpg" NAME="SP1"><SCRIPT language="javaScript"> <!-- var NO1=1,NO2=2,NO3=3,NO4=4; img=new Array(4) img[1]="A.jpg" img[2]="B.jpg" img[3]="C.jpg" img[4]="D.jpg" UP(); function UP() { setTimeout("UP()",10000); document.SP1.src=img[NO1]; document.SP2.src=img[NO2]; document.SP3.src=img[NO3]; document.SP4.src=img[NO4]; NO1++; NO2++; NO3++; NO4++; if(NO1>4){NO1=1;} if(NO2>4){NO2=1;} if(NO3>4){NO3=1;} if(NO4>4){NO4=1;} } //--> </SCRIPT> </td> </td> <td><IMG SRC="B.jpg" NAME="SP2"</td></tr> <tr><td">C</td></tr> <tr><td><IMG SRC="C.jpg" NAME="SP3"></td></tr> <tr><td>D</td></tr> 一部省略 </table> </body> </ht
- 締切済み
- JavaScript
- スクリプトの繰り返しの防止
下記のようなスクリプトがあります。 これは、CSVファイルを1行表示し、編集可能にするスクリプトの1行表示部分です。 これを全行表示するスクリプトに変更したいと考えています。 while ($cnt) { foreach(@csv2){ .............................. } } とすると無限ループするようです。(サーバーが固まる) webで調べたのですが、$cnt = '1'or die "$!"としても抜けだせません。 行が無くなったら作業を終了するとしたいのですが、どうすればいいでしょうか? 初歩的な質問で恐縮なのですが、レンタルサーバーをこれ以上固まらせるわけ にもいかないため、ご教授頂ければと思います。 @csv2 = split(/\<>/,$csv[$param{'num'}]); $cnt = '1'; foreach(@csv2){ &trString(\$_, "1",); if($_ eq $csv2[-1]){ chomp($_); } print "<tr>\n"; print qq|<td><input type="text" name="$cnt" size="30" value="$_"></td>|; print "</tr>\n"; $cnt++; }
- ベストアンサー
- Perl
- １つのファイルで画像をクリックしたら差し代わる方法
表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>
- ベストアンサー
- JavaScript
- csvファイルのデータを変数として取込むには？
javascriptは１年生です＾＾ データバインドを利用して、テーブルにデータを表示しています。 document.write("<object id='setData' classid='clsid:333C7BC4-460F-11D0-BC04-0080C7055A83'>"); document.write("<param name='DataURL' value='setdata.csv'>"); document.write("<param name='UseHeader' value='true'>"); document.write("</object>"); document.write("<table border='1' datasrc='#setData'>"); document.write("<tr>"); document.write("<td><span datafld='data1'></span></td>"); とこんな感じで続くのですが、csvファイルのデータには、セル幅や背景色等の設定値も含まれています。 これらのデータは表示用のデータではないので、変数として取込まなければなりません。 普通なら、bodyタグの中に、 <input type="hiden" datafld="optionData1"> と書いて、そこからjavascriptで取込むことは可能ですが、document.writeを使うとbodyタグの中が書き換わってしまうので使えません。 （csvファイルの１行分のデータを、HTMLのテーブルで表示する時には、4行～6行と行数が変動するので、予めテーブルをbodyタグの中に書いておくことが出来ません。テーブル行数はスクリプト内で決定するので。なのでbodyタグの中は空でオールjavascriptでHTMLを生成しています） もう一つの方法はフレームを使って、parentで、データを送ることも考えたのですが、もっとスマートな方法はないでしょうか？？
- ベストアンサー
- JavaScript
- onclickで画像と文字を別々の場所に表示したいのですが...
onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。 （例えば：「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはＯＫ、 その下に「富士山」の文字を表示したい←これです。） 下記のようにしています。 <script language="javascript"> <!-- function Image(img){ document.getElementById("image").src=img} //--> </script> </head> <table> <tr> <td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td> <td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td> <td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td> <td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td> </tr> <tr> <td colspan="4"><img src="sample1.jpg" name="image"></td> </tr> <tr> <td>***ここに文字を表示させたいのです***</td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- JavaScript
- スワップイメージのフェード方法を教えてください
はじめまして。 スワップイメージを、あるサイトを参考に作ってみました。 それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。 JavaScriptは全く分からず、困っています。 お助けください。お願いします。 ちなみに以下がスワップイメージのソースです。 image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。 <HEAD> <script language="JavaScript"> <!-- Img = new Array() Img[0]="img/image1.jpg" Img[1]="img/image2.jpg" Img[2]="img/image3.jpg" AImgs = new Array() for (i=0 ; i<Img.length ; i++){ AImgs[i] = new Image() AImgs[i].src = Img[i] } function Swap(a,b){ a=a.name document.images[a].src = Img[b] } //--> </script> </HEAD> <BODY> <TABLE> <TR> <TD><IMG src="img/image1.jpg" name="image"></TD> </TR> <TR> <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD> <TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD> </TR> </TABLE> </BODY>
- ベストアンサー
- JavaScript
お礼
himajin100000さん、無事うまく出来ました！ ありがとうございます。 また何かありましたら、よろしくお願いします。
補足
himajin100000さん、早速の書き込みありがとうございます。 説明不足ですみません。表示する結果なのですが、まずimg/a01.jpgという部分はimgフォルダの画像のパスをCSVファイルのセルに記述して、その画像を表示させ、ほかは画像のコメント情報として表示させる感じです。 ですので、|画像|コメント1|コメント2 という形のがレコード分表示するというものです。しかしながら自分が参考したソースでやるとレコード分ループして表示になってしまいます。（レコードが3なら、同じレコードが3つ、3回出てきちゃいます） 1,2,3 1,2,3 1,2,3 みたいな感じになっちゃいます。 これを 1,2,3 と一回だけ表示させたいのです。 himajin100000さんのソースを早速試してみたいと思います。 ありがとうございます。