ランダム表示についての質問
- ランダム表示についての質問についてまとめました。
- ページ内の特定の要素にランダム表示するスクリプトについての質問です。
- ランダム表示スクリプトの使用方法について、具体的な質問があります。
- ベストアンサー
<table>、もしくは<iframe>内でのランダム表示は？
ご質問させてください。 いろいろ調べたのですが、 画像やテキストのランダム表示については、結構あるのですが ページ内にあるひとつの<table>（もしくは<td>）、または<iframe>の中（<iframe>に、入るソースはhtml形式です。）に読み込み毎にランダム表示するスクリプトがわかりません。 そんな素敵なjavascriptがあったら教えてください。また、私、htmlを少し理解している程度なので、やさしくご指南いただけたらと思います。なお、IE、NN等のブラウザ環境はとりあえずおいてのお話でいただければと思います。 よろしくお願いいたします。 たとえば、単純にランダム画像を入れるスクリプトの 画像（img）をhtml（iframeの場合）に変更したらいけるのでしょうか？
- punats
- お礼率70% (7/10)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
確かに、文字のランダム表示、IMGタグでの画像ランダム表示を紹介しているサイトはたくさんありますが、その応用を書いたサイトは数少ないですね でも、基礎さえ分かってしまえば、今回のご質問のような応用を利かせた事も出来てきますので、がんばって覚えてください＾＾ 例えば、IMGタグに画像を表示するとします。 JavaScriptでは、(IMGタグ).src = "～画像URL～"と書きますが、HTMLでは、<img src="～画像URL～">と、JavaScriptと同じように「src」と言うキーワードを使って、絵を描画しますよね。 HTMLとJavaScriptは相通じる所があり、タグの中で使用できるプロパティ名は、書き方は違いますが、殆どそのままJavaScriptで記述し使用することが出来ます。 最初は「何のこと？」と思われるかもしれませんが、色々試していくうちに、きっと分かって頂けるはずです。 さて、そろそろ本題に入りますが、IFRAMEやTABLE内に画像を貼り付けると言うことですが、IFRAMEはIMGタグで使用したものと同じ事を行えば、表示させることが出来ます。 TABLEタグの場合は、TDセルの背景画像として、画像の貼り付けを行うことが出来ます。 背景画像は、HTMLDではSTYLE="background:url(～);"として指定することが出来ますが、JavaScriptでは、～.style.background = "url(" + (画像URL) + ")"; として指定することにより、背景画像を貼り付けることが出来ます。 尚、document.all[～]と言う書き方は、IE専用の記述方法ですので、NNなどでは動作しません。ご注意ください。 以下の例では、ウィンドウを開くと、IFRAME/TABLEが画面一杯に広がり、その中にTEST1.jpgもしくはTEST2.jpgのどちらかの画像が表示されます。 IFAMEを使用した例 --------------------------------------------- <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var arrImage = new Array(); arrImage[0] = "TEST1.jpg"; arrImage[1] = "TEST2.jpg"; function dispRandomImage() { var rdm = Math.floor(Math.random() * 100) % arrImage.length; document.body.all["objIframe1"].src = arrImage[rdm]; } //--> </SCRIPT> </HEAD> <BODY TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;" onLoad="dispRandomImage()"> <IFRAME NAME="objIframe1" BORDER=0 WIDTH=100% HEIGHT=100%></IFRAME> </BODY> </HTML> --------------------------------------------- TABLEを使用した例 --------------------------------------------- <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var arrImage = new Array(); arrImage[0] = "TEST1.jpg"; arrImage[1] = "TEST2.jpg"; function dispRandomImage() { var rdm = Math.floor(Math.random() * 100) % arrImage.length; document.all["cell1"].style.background = "url(" + arrImage[rdm] + ")"; } //--> </SCRIPT> <BODY TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;" onLoad="dispRandomImage()"> <TABLE WIDTH=100% HEIGHT=100%> <TR><TD ID="cell1" WIDTH=100% HEIGHT=100% BGCOLOR="GREEN"></TD></TR> </TABLE> </BODY> </HTML> ---------------------------------------------
関連するQ&A
- <iframe>内にHTMLをランダム表示するには？
かなりの素人なので説明不足などで分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeがあるのですが、 その全てのiframeをランダムにしたいのですが、 あまりの素人なので全く分かりません。 申し訳ありませんが、 多少いじってコピペするくらいまでのソースを教えて頂けますでしょうか？ 宜しくお願い致します。 iframe一つだけのランダムは以下のソースでできました。 <head> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x=Math.floor(Math.random()*n); sub_flame.location.href = rlURL[x]; } //--> </script> </head> <body TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;height:100%;" onLoad="RndmOpen()"> <script><!-- document.write("<iframe src=\""+riURL[x]+"\"></iframe>"); //--> </body> 以下のhtmlのようなページです。 できましたら、このソースに書き加え頂けますと 大変助かります。 宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- <iframe>内にHTMLをランダム表示するには？続きです。
先日の<iframe>内にHTMLをランダム表示するには？の続きなのですが、 http://questionbox.msn.co.jp/qa2962976.htmlの疑問は 皆様のお力で解決しました。 誠にありがとうございました。 もう一つ教えて頂きたいことがあるのですが、 かなりの素人なので説明不足など分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeを配置し、 各iframeをランダムにしたいのです。 その際、各iframeは別々のフォルダーに収納されているhtmlを 表示するようにしたいです。 例えば、同じhtmlに iframe１、iframe２、iframe３があるとし、 ０１、０２、０３という３つのフォルダーの中に ０１.html、０２.html、０３.htmlがそれぞれ収納されているとした場合、 iframe１は01のフォルダーの中のhtmlをランダムで表示し、 iframe２は02のフォルダーの中のhtmlをランダムで、 iframe3は03のフォルダーの中のhtmlをランダムで、 といったランダム表示にしたいです。 あまりの素人なので全く分かりませんので、 大変申し訳ありませんが、 多少いじってコピペするくらいまで完成されたソースを教えて頂けますでしょうか？ 宜しくお願い致します。 ------------------------------------------------------------------------- 以下のソースは、 ３つのiframeに同じフォルダー内のhtmlをランダムで表示させることができたソースです。 教えてもらいました。 こちらは参考までに載せました。_ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x1=Math.floor(Math.random()*n); x2=Math.floor(Math.random()*n); x3=Math.floor(Math.random()*n); s01.location.href = rlURL[x1]; s02.location.href = rlURL[x2]; s03.location.href = rlURL[x3]; } //--> </script> </head> <body onload="RndmSubFlame()"> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s03" scrolling="no"></iframe></td> </tr> </table> </body> </html> ------------------------------------------------------------------------- 以下のhtmlソースに書き加えてもらえると大変助かります。 何卒、宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="45%" height="448"> <tr> <td width="46%" height="210"><iframe src="01/01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="54%" height="442" rowspan="2"><iframe src="03/01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> <tr> <td width="46%" height="226"><iframe src="02/01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- table内でiframeを表示
table内でiframeを表示するとき、iframeの幅をtableのセルの幅に合わせるにはどうすればいいでしょうか？ <table> <tr> <td>…</td> <td><iframe src="…"></iframe></td> <td>…</td> </tr> </table>
- ベストアンサー
- HTML
- ランダム表示の画像とリンクのづれを修正したい
以前こちらで下記のようなjavascriptのリンク付画像のランダム表示方法を教えて頂きました。 画像は全部で20枚以上、表示枚数は8枚、総画像枚数分別々のリンク先を指定します。画像枚数分のhtmlページが存在し、全てのページにテンプレートで同じスクリプトが組み込んであり、それぞれのページに8枚の違う画像が表示され、そこから好きな画像をクリックすることで指定したリンクページにジャンプさせたいのです。 が…確認すると画像は8枚づつランダムに表示はされるのですが、画像とその画像に指定したリンクがづれる箇所があります。全部ではないのですが…どこで画像とリンクがづれているのかいつも決まっているわけでもなく全くわかりません。 Images.splice(k,1);のところだと思いイジってみたものの今度は画像の表示8枚の中で、同じ画像が 表示されてしまったりと、解決できませんでした。 どのように直せば画像をランダムに表示させてリンク先のづれを無くせるのか、よろしければどなたか教えて頂けると大変光栄です。 <head> <script type="text/javascript"> var imgcount=23; var viewcount=8; var Images = new Array(); var Link = new Array(); Link[0]="o00.htm"; Link[1]="o01.htm"; Link[2]="o02.htm"; ・・・・・・ Images[0] = './img/0.jpg'; Images[1] = './img/01.jpg'; Images[2] = './img/02.jpg'; ・・・・・・ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_self"> <img src="'+Images[k]+'"></a>'; Images.splice(k,1); } } </script> </head> <body onload="changeImage()"> <table> <tr><td id="a_0"></td><td id="a_1"></td><td id="a_2"></td><td id="a_3"></td></tr> <tr><td id="a_4"></td><td id="a_5"></td><td id="a_6"></td><td id="a_7"></td></tr> </table> よろしくお願いいたします。
- 締切済み
- JavaScript
- IFRAMEの表示/非表示を切り替えたい
こんにちは。初歩的な質問ですが、タイトルの件についてです。 JavaScriptを使ってIFRAMEの表示/非表示を切り替えたいのですが、早速つまづいてしまいました。 以下がソースです。(JavaScript呼び出し部分は省略します。) ■IFRAME部分■ <iframe src="test.html" style=" visibility:visible;" name="test"> </iframe> ■JavaScript部分■ <SCRIPT Language="JavaScript"> <!-- function test() { window.document.test.style.visibility = hidden; } // --> </SCRIPT> よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法
今ＨＰを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか？ もしくは他の方法あるでしょうか？ ランダムに表示される画像は３枚と仮定し、 それぞれ３枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。
- ベストアンサー
- HTML
- 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"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>
- ベストアンサー
- JavaScript
- 画像をランダムに表示するには
<script language=JavaScript> <!-- var img=new Array(); img[0]='画像1'; img[1]='画像2'; img[2]='画像3'; img[3]='画像4'; img[4]='画像5'; ran_gazo=Math.floor(img.length * Math.random()); document.write('<IMG SRC='+img[ran_gazo]+'>'); //--></script><!--scripted by shotyan@dreamcity--> というのを使いますよね？（あるサイトで見つけました）でも、画像があるべき場所に「×」がついて、画像が出ないんです・・ どうしたら画像がランダムに表示されるんでしょうか。 教えてください。 そして、その画像を右上に固定したいんです。 注文多くてごめんなさい。
- ベストアンサー
- JavaScript
- 複数のランダム表示について
現在、外部のjsを読み込み、 ランダムではなく下記の方法で ４バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で４つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- リンク付バナーのランダム表示のづれを修正したい
以前こちらで、以下のようなそれぞれの画像にリンクを付けた画像をランダム表示させるjavaスクリプトを教えて頂き、ｈｔｍｌ上に記述しましたが、指定した画像とリンク先が途中づれてしまいます。 ページ数と用意した画像とリンク先は23、表示は8。すべて同じように記述された商品紹介ページです。ランダムに表示される画像からジャンプ先のページに行き、そのページ内の画像からまた別ページにジャンプを繰り返し確認したところ、途中で指定した画像とリンクにづれが出てきます。 ある一定のところでづれているのかどうかも、わからず、何故づれるのか？困っています。 どなたかお解かりの方、ご助力いただけないでしょうか？ 記述は以下のとおりです。 <script type="text/javascript"> var imgcount=23; var viewcount=8; var Images = new Array(); var Link = new Array(); Link[0]="f-00.htm"; Link[1]="f-01.htm";・・・ Images[0] = './../img/0.jpg'; Images[1] = './../img/1.jpg';・・・ </script> <body onload="changeImage()" > <table id="ramdom_box"> <tr><td id="a_0"></td><td id="a_1"></td><td id="a_2"></td><td id="a_3"></td></tr> <tr><td id="a_4"></td><td id="a_5"></td><td id="a_6"></td><td id="a_7"></td></tr> </table>
- ベストアンサー
- JavaScript
お礼
coral0様 早速のご返答ありがとうございます。 しかも、ご丁寧にご教授いただきまして、 大変わかりやすかったです。 現段階では、理屈や基本は理解すらできぬものの 早速試してみたところ、見事に表示することが できました！ まだまだ、htmlもままならない状態ですし、 Javascriptもそれ以下です。 覚えていかなければいけないことが 多すぎて、これから焦らず急いで学んで行きたいと 常に自分にプレッシャーをかけています。 本当にありがとうございました。m(__)m