Sfondo casuale

[royalsalerno]

Salve,
ho un insieme di 5 immagini di sfondo, dovrei creare una pagina con lo sfondo che viene scelto casualmente da questo insieme, come posso fare?
Inoltre, ogni 5 secondi, dovrebbe essere scelto, sempre casualmente, un nuovo sfondo al posto di quello attuale, è possibile?
Grazie

[kluster]

qualcosa del genere

number = 1;
IDCAMBIO = "backgroundTD"
maxNumber = 5
refresh   = 5000

function changeBg()
{
	var tdBG					= document.getElementById(IDCAMBIO);	
	tdBG.style.backgroundImage	= "url('img/bg" +  number + ".jpg')";
	number ++;
	if (number==maxNumber) {number = 1;}
}
function init()
{
	var ww;var myImg 					= new Image();
	for (ww=1;ww< maxNumber+1 ;ww++){	myImg.src 	= "/img/bg" +  ww + ".jpg";}
	setInterval("changeBg()",refresh );
}
window.onload = init;

qui si assume che immagini si chiamino bg1.jpg, bg2.jpg, bg3.jpg etc, che si trovino nella cartella IMG sulla root
e che l'immagine da cambiare si trovi nel layer backgroundTD

nel tuo caso sostituisci
var tdBG = document.getElementById(IDCAMBIO);
con
con tdBG = document.getElementsByTagName("BODY").item(0)

[royalsalerno]

Scusa, potresti dirmi come e dove inserire questo codice nell'html della pagina?
Grazie

[kluster]

mio consiglio è quello di tenere sempre separato il js dall'html

quindi
crei un file lo chiami changeBackground.js
dove inserisci questo:

    number = 1;
    maxNumber = 5
    refresh   = 5000

    function changeBg()
    {
    	var bodyBG = document.getElementsByTagName("BODY").item(0)
    	bodyBG.style.backgroundImage	= "url('img/bg" +  number + ".jpg')";
    	number ++;
    	if (number==maxNumber) {number = 1;}
    }
    function init()
    {
    	var ww;var myImg 					= new Image();
    	for (ww=1;ww< maxNumber+1 ;ww++){	myImg.src 	= "/img/bg" +  ww + ".jpg";}
    	setInterval("changeBg()",refresh );
    }
    window.onload = init;

poi lo puoi collegare quando ti pare con

<script type="text/javascript" src="changeBackground.js"> </script>

che ci sia uno spazio tra <script...> e </script> e modifica eventualmente i percorsi ai file immagini e la nominazione

[royalsalerno]

Grazie mille,
in effetti la tua soluzione va benissimo. Ma, dal momento che lo sfondo è più piccolo della finestra, è possibile fare in modo che lo sfondo non si ripeta? Qualcosa tipo no-repetition o simili? L'ideale sarebbe se si potesse anche centrare...
Grazie ancora, ciao

[kluster]

certo
la sintassi di background è

bodyBG.style.backgroundImage	= "url('img/bg" +  number + ".jpg')Posizionemento_x Posizionamento_y RIPETIZIONE COLORE";

es.

bodyBG.style.backgroundImage = "url(/img/bg"+number+".jpg) top left no-repeat #FFF";

[royalsalerno]

Grazie, ho provato, però mi dà un errore: Argomento non valido.
Sai come mai o come potrei fare?

[kluster]

taglio la testa al toro, gli dai 1 proprieta' alla volta

bodyBG.style.backgroundImage= "url('img/bg"+number+".jpg')";
bodyBG.style.backgroundAttachment = "no-repeat";

[royalsalerno]

Ancora mi dà errore:
Impossibile ottenere la proprietà backgroundAttachment. Argomento non valido
Ci sono altre possibilità?

[kluster]

mmm, forse ti conviene fare una classe a posta e dargliela con
.className
cmq fai prima una prova:
bodyBG.style.background = "url(/img/bg"+number+".jpg) top left no-repeat #FFF";