immagine sfondo casuale

**alexesprit** · 25-01-2012, 16:57

Questo codice mi permette di cambiare l'immagine di sfondo della pagina ogni tot secondi:

codice:

<script type="text/javascript">

var bgImages = new Array();
bgImages.push("1.jpg");
bgImages.push("2.jpg");
bgImages.push("3.jpg");
bgImages.push("4.jpg");

function LoadRandomBackground()
{
	var randomImageIndex = Math.floor(Math.random()*bgImages.length)
 	document.body.background  = bgImages[randomImageIndex];
	
}

function StartBackgroundRefreshTimer()
{
	var timer = setInterval('LoadRandomBackground()',4000); // 4 seconds
}

</script>
</head>


<body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()">
</body>

1 - il problema è che l'immagine viene ripetuta mentre a me servirebbe fissa al centro. Cosa dovrei aggiungere o modificare nel codice per far ciò?

2 - si potrebbe fare in modo che l'immagine cambi solo quando viene ricaricata la pagina anzicchè ogni tot secondi?

Grazie mille!!

**longilineo** · 27-01-2012, 14:53

Per il primo problema dovresti usare un immagine al posto di cambiare lo sfondo del body e gestirne la posizione con un pò di css.

Per il secondo problema basta levare la seconda funzione.

codice:

<html>
    <head>
    <script type='text/javascript'>
           function applicasfondo(){
                var imgdest = document.getElementById('sfondo');
                var imgurls = [{percorso:'a.jpg', larghezza:'1024'}, {percorso:'b.jpg', larghezza:'1024'}, {percorso:'c.jpg', larghezza:'1024'}, {percorso:'d.jpg', larghezza:'1024'}, {percorso:'e.jpg', larghezza:'1024'}];
                var randomindex = Math.floor(Math.random()*(imgurls.length-1));
                var offset = imgurls[randomindex].larghezza * (-0.5);
                imgdest.style.marginLeft = offset+'px';
                imgdest.src = imgurls[randomindex].percorso; 
                //setTimeout('applicasfondo()', 4000);
            }
    </script>
    </head>
    <body onload='applicasfondo()'>
        [img][/img]
    </body>
</html>

Come configurare il tutto?

In questa riga:
var imgurls = [{percorso:'a.jpg', larghezza:'1024'}, {percorso:'b.jpg', larghezza:'1024'}, {percorso:'c.jpg', larghezza:'1024'}, {percorso:'d.jpg', larghezza:'1024'}]

Metti gli effettivi percorsi e le effettive larghezze in pixel delle immagini.

Se ad esempio hai le immagini foto/Alba.jpg larga 1000px e immagini/Tramonto.png larga 1251px, dovresti fare così:

var imgurls = [{percorso:'foto/Alba.jpg', larghezza:'1000'}, {percorso:'immagini/Tramonto.png', larghezza:'1251'}]

Se vuoi ripristinare il cambio immagine a intervalli regolari cambia qesta riga:
//setTimeout('applicasfondo()', 4000);
in:
setTimeout('applicasfondo()', 4000);

Se vuoi variare la dimensione dell'intervallo sostituisci a 4000(4 secondi) il numero che vuoi (sempre in millisecondi).

Discussione: immagine sfondo casuale

Strumenti discussione

Ricerca discussione

Visualizza

immagine sfondo casuale

Permessi di invio