JavaScriptでランダム表示を制御

質問

現在、別々のリンクを設定された６つの画像(<a href="..."><img src="..." /></a>)から、３つを取り出して、表示するというJavaScriptを作っています。

この３つのリンクされた画像は最初からHTMLに書かれているとします。

これを、DOMを使って、その別々の名前のIDのdivの子要素のhref,srcを抜き出したデータで書き換えてます。
（document.getElementById('...').href=...というカンジで）

その際に、書き換えの関数をonLoadで呼び出してます。
その際、どうしても最初で表示されている画像などが見えて、書き換えが行われてしまいます。

関数の前に、そのdivをdisplay:noneにして、処理が終了後にdisplay:blockにしてますが、それでも前述のように、前の表示が出てきます。

書き換え後のみを表示させる方法を、CSSで最初からdisplay:noneにしておく以外で方法が分かる方、おられましたらよろしくおねがいします。

回答No.2

noname#25358

<IMG> タグが最初からある前提であれば、無色透明のＧＩＦ画像を作って、初期状態のときだけそれを張っておくというのはどうでしょうか？

補足

すいません、「リンクされた画像」だけでは、説明が足りませんでしたが、意味のある画像という意味で、透明GIFを張る事はできないのです。

回答No.1

noname#25358

その画像を表示するスペースをテーブルなりエレメントなりを使って予め開けておき、中に<SPAN>タグを入れて動的に<IMG>タグを記述すればいいのではないかと思います。
　具体的には、たとえば１００×１００の大きさの画像を表示するとすれば、

<TABLE WIDTH=100px HEIGHT=100px><TR><TD>
<SPAN ID="img1"></SPAN></TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
switch ( Math.floor(Math.random() * 3) ) {
case 0:
　　document.all.img1.innerHTML = '<IMG SRC="a.jpg">';
case 1:
　　document.all.img1.innerHTML = '<IMG SRC="b.jpg">';
case 2:
　　document.all.img1.innerHTML = '<IMG SRC="c.jpg">';
}
//-->
</SCRIPT>

　とまぁ、こんな感じ。（↑デバッグしてません）
　画像は<SPAN></SPAN>の内側に表示されるわけです。
　参考にしてみてください。

補足

ご回答、ありがとうございます。
あと、すいません前提として、IMGタグは最初からある、というので、その際はinnerHTMLで入れ込むとしても、先に入ってるIMGタグはその後、display:noneにしても、希望通りに動くのでしょうか？