Cambiare background di un div

**AleMarWeb** · 23-04-2010, 09:44

Salve,
Spero di essere nella sezione giusta. Ho un piccolo problemino.
In pratica ho una pagina contenente un DIV con background.
Avrei la necessità di cambiare automaticamente ogni x secondi il background di questo div, magari anche con dissolvenza (se possibile).
Ho provato a fare in questo modo ma non funziona lo stesso

:

#innerpages {
/* Background image: */
background-image: url("images/background2.jpg");
background-repeat: no-repeat;
padding: 1em;
height: 20em;

}
</style>
<script type="text/javascript">

function back() {
var web = [];
web[4] = "background1.jpg";
web[1] = "background2.jpg";
web[2] = "background3.jpg";
web[3] = "background4.jpg";

var x = Math.ceil( web.length * Math.random() );
var div = document.getElementById("innerpages");
var img = "images/"+web[x]+"";
alert (x);
alert (web[x]);

div.style.backgroundImage = "url('images/background4.jpg');";
/*alert (div.style.backgroundImage = URL('images/'+web[x]+''));*/
setTimeout( "back()" , 5000 );

}
</script>
</head>
<body id="your-site-id" onload="back()">

[...]

<div id="contentbox" class="page">

<div id="padding">

<div id="innerpages" >

Avete una qualche idea del perchè non mi cambia l'immagine?

**homezappa** · 23-04-2010, 10:30

Funzione back() funzionante: controlla rispetto alla tua e nota le differenze.
Indizi:
- gli array, in javascript, iniziano dall'indize 0 (zero)
- non esiste elemento.style.backgroundImage, ma solamente elemento.style.background, che va 'riempito' con tutti gli attributi, in particolare anche il no-repeat, oltre all'url dell'immagine.
- non chiamare una variabile con lo stesso nome di un tag! si sa mai che i browsers facciano caos!

codice:

    <script type="text/javascript"> 
	function back() {
		var web = [];
		web[0] = "background1.jpg";
		web[1] = "background2.jpg";
		web[2] = "background3.jpg";
		web[3] = "background4.jpg";
		var x = Math.floor( Math.random() * web.length);
		var mydiv = document.getElementById("innerpages");
		var img = "images/"+web[x];
		mydiv.style.background = "url(\"" + img + "\") no-repeat";
		setTimeout( back , 5000 );
	}
    </script>

HTH
Zappa

**AleMarWeb** · 26-04-2010, 18:24

Ti ringrazio tantissimo.
Per caso non è che sai anche come fare le dissolvenze tra le immagini? Devo utilizzare per forza jquery?

Ti ringrazio anticipatamente.

Discussione: Cambiare background di un div

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare background di un div

Permessi di invio