Abertura de umagem randômica na página inicial

[moisesf]

Tenho uma div chamada mostra_foto que vai exibir algumas imagens randômicas ao entrar no site.

O problema que só funciona quando coloco como função e adiciono um botão para a ação onclick.

Caso contrário recebo um erro de "OBJETO NECESSÁRIO" bem na linha document.getElementById

Mas para a abertura do site não estou acertando.

<script language="Javascript">

 var qtdImagens='1';

     imagens = new Array ("foto1.jpg","foto2.jpg","foto3.jpg","foto4.jpg","foto5.jpg","foto6.jpg"); 
  for(i = 0; i < qtdImagens; i++) { 
  indImg = Math.round(Math.random()*(imagens.length - 1));
        foto = imagens[indImg];
            
document.getElementById('mostra_foto').style.background=" url(" + foto + ") no-repeat";
             }
             
             </script>


<style>
#mostra_foto{
position:relative;
width:960px;
height:600px; 
margin:0 auto;
z-index:3;

}
</style>

<div id="mostra_foto"></div>

Editado Janeiro 14, 2010 por KaKarotto
Inseridas tags de código. KaKarotto.

[KaKarotto]

Por que o html é renderizado de cima pra baixo. O seu script é a primeira coisa a acontecer, se é a primeira coisa a acontecer, o elemento que você está pegando pelo Id não existe ainda.

3 soluções.

1 - usar window.onload = function(){ } e botar dentro dessa function toda a sua funcionalidade.

2 - usar uma biblioteca para saber quando o documento foi carregado para executar sua função.

3 - Melhor de todas, colocar as tags scripts sempre no final da tag body, mas dentro da body, e em cima o html.

[moisesf]

Muito obrigado, a ultima solução foi a mais adequada, pois não posso colocar no body.

Por que o html é renderizado de cima pra baixo. O seu script é a primeira coisa a acontecer, se é a primeira coisa a acontecer, o elemento que você está pegando pelo Id não existe ainda.

3 soluções.

1 - usar window.onload = function(){ } e botar dentro dessa function toda a sua funcionalidade.

2 - usar uma biblioteca para saber quando o documento foi carregado para executar sua função.

3 - Melhor de todas, colocar as tags scripts sempre no final da tag body, mas dentro da body, e em cima o html.

Muito Obrigado.

[moisesf]

Tenho como colar um: setTimeout nesse script?

<script>

 var qtdImagens="6";

     imagens = new Array ("foto1.jpg","foto2.jpg","foto3.jpg","foto4.jpg","foto5.jpg","foto6.jpg"); 
  for(i = 0; i < qtdImagens; i++) { 
  var indImg = Math.round(Math.random()*(imagens.length - 1));
       var foto = imagens[indImg];            
document.getElementById("mostra_foto").style.background="url('" + foto + "') no-repeat";
             setTimeout ( 1000);/*como colocar o tempo?*/
             }
             
</script>