- ベストアンサー
ランダム表示についての質問
- ランダム表示についての質問についてまとめました。
- ページ内の特定の要素にランダム表示するスクリプトについての質問です。
- ランダム表示スクリプトの使用方法について、具体的な質問があります。
- 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> ---------------------------------------------
お礼
coral0様 早速のご返答ありがとうございます。 しかも、ご丁寧にご教授いただきまして、 大変わかりやすかったです。 現段階では、理屈や基本は理解すらできぬものの 早速試してみたところ、見事に表示することが できました！ まだまだ、htmlもままならない状態ですし、 Javascriptもそれ以下です。 覚えていかなければいけないことが 多すぎて、これから焦らず急いで学んで行きたいと 常に自分にプレッシャーをかけています。 本当にありがとうございました。m(__)m