javascriptで画像をテーブルに出力する方法

2023/08/10 17:17

このQ&Aのポイント

javascriptを使用して、画像をテーブルに出力する方法を教えてください。
定期的に入れ替わる画像をテーブルに表示するためのjavascriptの方法を教えてください。
画像をテーブルに出力するためのjavascriptコードを紹介します。

ベストアンサー

javascriptで画像をテーブルに出力する方法

2010/12/08 10:59

javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。 <html> <head> <script language="JavaScript"></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"></script> </head> </html>

sen-mac
お礼率0% (0/2)

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/12/08 13:45 回答No.2

</head>の上に<img>があるのは何かの間違いとして、画像をテーブルに出力（表示）の意味を素直に解釈して、表示したい場所が、<th></th>か<td></td>か知らんけど <table> <tr><th>画像</th></tr> <tr><td id="kokonigazo"></td></tr> <tbody> </tbody> だったら、 var img = document.createElement("img"); img.src = myImage[myNowCnt]; img.alt = ""; img.name = "myFormImg"; img.width = 200; img.height = 200; document.getElementById("kokonigazo").appendChild(img.cloneNode(true)); ※テーブルだったらrowIndexとcellIndexででも場所を特定できるけど．．

その他の回答 (1)

fujillin
ベストアンサー率61% (1594/2576)

2010/12/08 13:23 回答No.1

＞画像をテーブルに出力（表示）する方法を教えてください。ご提示の<img>要素がテーブルの中にあって、それを入替えたいという意味でしょうか？あるいは、用意している画像全体を表（テーブル）として表示したいという意味でしょうか？とりあえず、前者であれば同じ方法で可能ですが、要素の指定をid指定などにしておいたほうが確実と思われます。 <table><tr> 　・・・・・ <td><img src="xxx" id="myFormImg"></td> 　・・・・・ </tr></table> 表示する部分のスクリプトを document.getElementById("myFormImg").src = myImage[myNowCnt]; にかえるとかでいけませんか？後者の場合だと、何行（あるいは何列）にするかなどの指定がありませんが、以下、2列（=iの繰返し数）の場合の大雑把なサンプル。 var t = document.createElement("table"); var tr = document.createElement("tr"); var td = document.createElement("td"); var img = document.createElement("img"); var count = 0, leng=myImage.length; var i, er, ed, eimg, col = 2; // col:列数 while(count < leng) { 　er = tr.cloneNode(false); 　t.appendChild(er); 　for (i=0; i<col; i++) { 　　ed = td.cloneNode(false); 　　er.appendChild(ed); 　　if (count < leng) { 　　　eimg = img.cloneNode(false); 　　　eimg.src = myImage[count]; 　　　eimg.alt = myImage[count++]; 　　　ed.appendChild(eimg); 　　} 　} } document.getElementsByTagName("body")[0].appendChild(t);

関連するQ&A

画像を順にフェードインフェードアウトで表示
ＨＰのＴｏｐページのw900×h300位のスペースに順に画像をフェードインフェードアウトしながら表示させ,最後の画像でストップさせたい Flashムービーを作成するのは簡単なのですが、iPadに対応しない為 jQueryなどで表示させたいのですが、javaが全然わからず困っています。一応下記のように自分で調べてみて見つけた、近いものを作っては見たものの <script language="JavaScript"></script> <img src="img/main/f01.jpg" width="900" height="300" name="myFormImg"> <script language="JavaScript"></script> こんな感じでやってみたもののこれではフェードインフェードアウトにはなりませんどこに何を足せばいいのか、または全く違うコードを書けばいいのかどなたかお教えいただけませんでしょうか。 jQueryだと記述はもっと簡単なのでしょうか？
- ベストアンサー
- その他([技術者向] コンピューター)
html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptで画像からリンクプラスアルファ
http://www.printpac.co.jp/ こちらのページの 2段目のスライドしているナビゲーションのようにマウスオ-バーでnext,prevボタンが表示され、それをクリックすると次の画像が即座に表示され、なおかつ目的の画像からは個別のページへリンクする。というものが作りたいと思っています。今現在はフェードインフェードアウト(画像表示の雰囲気がサンプルとは少し異なります)で画像を7枚順に表示されるようにするところまではＯＫです。更に、最後の画像の（giifファイル）中の文字からクリックでリンクに飛ぶ。そして、3秒周期の表示が待てない人にはnext,prevの矢印がマウスオーバーで出てきて、それをクリックすると次の画像がフェードインする。という風にしたいと思っています。現在のコードです。 <script src="http://code.jquery.com/jquery.js"></script> <script language="JavaScript"></script> <img src="img/main/f01.jpg" width="900" height="300" id="myFormImg"> <script language="JavaScript"></script> サンプルのページでは"CSS"と"画像にMap"作ってリンク飛ばして、スライダーの動きはｊｓファイルで制御しているようでしたのでこの"Ｍａｐ"を参考にひとまず最後に来るはずの画像を最初に持ってきて画像ファイルにＭａｐ作ってリンク飛ばして対応してるのですが、かなり苦し紛れ状態です・・・何をどのように記述すれば目的の物が出来るでしょうか？よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
ページ更新の度に変わる画像を上部と下部の中央に表示させるには？
アフィリエイトをやっておりまして、ページを表示するたびにバナーが変わるようにしたいと思っております。Googleで検索しましたところ下のようなJavaScriptを使うことが分かりました。ですがこれは＜head＞と＜/head＞の間に書かなければなりませんよね？これをページ上部中央と、また下部中央に表示させたいのですが、何を加えればよろしいのでしょうか。また、各画像にリンクをつけるにはどのようにすればよろしいのでしょうか。よろしくおねがいします。 <SCRIPT LANGUAGE = "JavaScript"> myImageCnt = 15; myImage = new Array( "01.jpg", (途中省略) "15.jpg"); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); </SCRIPT>
- ベストアンサー
- JavaScript
javascriptで画像をランダム表示させたい
javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"></script> </body> </html>
- ベストアンサー
- JavaScript
javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。画像はsamp0.jpg～samp4.jpgの計5枚ただ、問題があって、画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが分からず困っています。それぞれ、画像0の時は5000ミリ秒　画像1の時は4000ミリ秒画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。一応、timeは配列がいいのかと配列にしてみましたそれが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？スクリプトを詳しく教えていただけると、ありがたいです。以下、javascriptの一部を記します。【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。詳しい方、ぜひ教えてくださいませ。どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
JavaScriptが旨く動きません
下記のタグをHEAD～/HEADの間にいれたのですが旨く行きませんよろしくお願いします <script language="JavaScript"> fad=0; function wipe(img){ fad++; fad%=5; img.filters.blendTrans.Apply(); img.src="t"+fad+".jpg"; img.filters.blendTrans.Play();} </script> BODY～/BODYの間へ入れています <img src="t0.jpg"style="filter:blendTrans(duration=3);width350px; height:350px;"onClick="wipe(this)">
- 締切済み
- Mac
画像クリックでウインドウを閉じたいのですが・・・
こんにちは。JavaScriptはwebサイトから頂いてコピーして使うだけの理解力です。どうぞよろしくお願いします。フォトアルバムを作っていまして、画像をクリックするごとに画像が入れ替わるところまではできたのですが、それですと延々と続いてしまいますので、最後の画像で小窓ごと閉じてしまいたいのですが、どのようなタグになりますでしょうか？ HEADに <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> bodyに <a href="JavaScript:myChange()"><img src="http://www5b.biglobe.ne.jp/○○.jpg" border="0" name="my_imgchange"> と入れています。例えば3枚目の画像をクリックした時に、また1枚目の画像に戻るのではなくて、小窓ごと閉じてしまうにはどのようなタグをどこへ埋め込めばよろしいでしょうか？色々試してみましたがうまくいきませんでした。どなたか力をお貸しください。どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
ボタンを押すたびに画像を切り替えるには？
まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れていますなんで動かないのがわからないです回答できたらよろしくお願いします
- ベストアンサー
- JavaScript
JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript">  </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript