<table>、もしくは<iframe>内でのランダム表示は？

解決済

質問者：punats
質問日時：2004/09/02 14:59
回答数：1件

ご質問させてください。

いろいろ調べたのですが、
画像やテキストのランダム表示については、結構あるのですが
ページ内にあるひとつの<table>（もしくは<td>）、または<iframe>の中（<iframe>に、入るソースはhtml形式です。）に読み込み毎にランダム表示するスクリプトがわかりません。

そんな素敵なjavascriptがあったら教えてください。また、私、htmlを少し理解している程度なので、やさしくご指南いただけたらと思います。なお、IE、NN等のブラウザ環境はとりあえずおいてのお話でいただければと思います。

よろしくお願いいたします。

たとえば、単純にランダム画像を入れるスクリプトの
画像（img）をhtml（iframeの場合）に変更したらいけるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： coral0
回答日時：2004/09/02 21:17

確かに、文字のランダム表示、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">

</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">

</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>
---------------------------------------------

- 0
- 件

通報する

この回答へのお礼

coral0様

早速のご返答ありがとうございます。

しかも、ご丁寧にご教授いただきまして、
大変わかりやすかったです。

現段階では、理屈や基本は理解すらできぬものの
早速試してみたところ、見事に表示することが
できました！

まだまだ、htmlもままならない状態ですし、
Javascriptもそれ以下です。

覚えていかなければいけないことが
多すぎて、これから焦らず急いで学んで行きたいと
常に自分にプレッシャーをかけています。

本当にありがとうございました。m(__)m