slideshow in background con dissolvenza

**eziobav** · 24-09-2009, 14:29

Salve a tutti, mi ripresento sul forum con un nuovo dilemma.........vi spiego la mia idea:

Vorrei mettere come sfondo di una pagina web uno slideshow di xxx immagini, il problema è che io voglio usare l'effetto dissolvenza per fa passare le immagini evitando così quegli scatti tra un'immagine e l'altra, ho trovato questo script, ma non sto riuscendo ad adattarlo, qualche suggerimento???

Grazie in anticipo......

codice:

<html>
<head>

<style>
body{
background-repeat: no-repeat;
background-position: 200 100;
}
</style>

<script language="JavaScript">
<!--

// Velocità (in millisecondi)
var speed = 1000

var Pic = new Array()

// Specificare i percorsi delle immagini
Pic[0] = 'img/01.gif'
Pic[1] = 'img/02.gif'
Pic[2] = 'img/03.gif'
// per aggiungere altre immagini continuare l'array aggiungendo altri elementi sotto
	
var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
   if (document.body){
   document.body.background = Pic[j];
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runBGSlideShow()', speed)
   }
}

//-->
</script>

</head>
<body onload="runBGSlideShow()">



<div align="center">
</div>
</body>
</html>

**cavicchiandrea** · 24-09-2009, 17:01

Non puoi fare dissolvenza sulle immagini di sfondo

**Enzaccio** · 24-09-2009, 22:18

Eh già ...
Il fatto è che la dissolvenza si basa sulla gestione nello STYLE della proprietà OPACITY che puoi applicare agli Elementi; cioè, essendo l' immagine attribuita al BODY in definitiva, dovresti applicare l' opacità a questo col risultato che tutto il contenuto diventa semi-trasparente ... e per dispetto, tutto tranne l' immagine di sfondo.
PROVA !

codice:

<style type="text/css">
body {
 background-image: url(http://alectart.altervista.org/images/onthesun.jpg);
 opacity: 0.4;              /* questo per tutti o quasi */
 filter: alpha(opacity=40); /* questo per far contento IExplorer */
 }
</style>

Non possiamo avere una background-opacity: 0.4; da definire.

E stiamo ancora parlando di style "statico" attribuito a Elementi, non ancora di JavaScript che lo gestisce in modo "dinamico".
Perché ti voglio con ciò, far partire dal presupposto che se "la cosa" non si può fare in style "normale", tantomeno si potrà in JS che su questo dovrebbe agire (modificando Valori di OPACITY).

Esiste però la possibilità di un workaround che ti posto velocemente, nelle sue linee essenziali, così come l' ho buttato giù sul momento; prendilo come base di partenza e sopratutto, studiaci un po':

codice:

<html>
<head>

<style type="text/css">
body {
 margin: ; /* assegna 0px per avere il div-background senza bordino */
 }
</style>

</head>
<body bgcolor="">

<div id="backgrnd" style="width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); 
                          background-image: url(http://alectart.altervista.org/images/onthesun.jpg);">
</div>

<div id="bodylike" style="position: absolute; top: 0px;">
 <h1>Enzaccio' s Page</h1>
</div>

</body>
</html>

**eziobav** · 25-09-2009, 12:46

Vi ringrazio e ci lavorerò un po su, se trovo una soluzione vi farò sapere e posto il ristltato e magari una demo

grazie spero a presto!

**Enzaccio** · 25-09-2009, 16:06

Originariamente inviato da eziobav
... ci lavorerò un po su,

Un DIV lo possiamo far raggiungere da un' istruzione JS, con document.getElementById
e difatti al DIV che ci serve per l' immagine di sfondo, ho assegnato un ID id="backgrnd" (puoi anche usare id="giuseppe" ).

Lo script cui hai fatto riferimento, utilizza document.body e andrà modificato di conseguenza nella function runBGSlideShow() che diventa:

function runBGSlideShow(){
   if (document.getElementById){
   document.getElementById("backgrnd").style.backgroundImage = "url(" + Pic[j] + ")";
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runBGSlideShow()', speed)
   }
}

o più semplicemente:

codice:

function runBGSlideShow(){
   
   document.getElementById("backgrnd").style.backgroundImage = "url(" + Pic[j] + ")";
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runBGSlideShow()', speed)
   
}

nella quale ho eliminato del tutto una condizionale IF (con la relativa parentesi } di chiusura) del tipo:

   if (document.body){ }
   if (document.getElementById){ }

il cui scopo è testare se taluni percorsi /oggetti vengono riconosciuti dal Browser in uso; vale a dire, se la versione di JavaScript installata nel Browser dell' utente supporta document.getElementById .
Se e solo se il riscontro è positivo, l' elaborazione procede.
La verifica/cautela serve (serviva) ad evitare il blocco dell' elaborazione JS per presenza di istruzione eventualmente incompatibile col Browser in uso; blocco che potrebbe impedire anche altre funzioni JS richieste dalla pagina.
Ma dato che document.getElementById è già presente in IExplorer 5.5 e Netscape 6 (quindi da 10 anni) può essere ormai superfluo eseguire la verifica.

Con le modifiche indicate, ottieni la sostituzione dell' immagine di sfondo di un DIV; non ottieni ancora la dissolvenza, ma siamo già un bel passo avanti.
Ci vorrà un altro timer setTimeout() o setInterval() (sono i due che usiamo in JS) che scandisca la crescita di una variabile (numerica) che si traduce nel livello di opacità da far assumere (nel tempo) al DIV di sfondo.

**eziobav** · 25-09-2009, 18:25

ci sto lavorando un po su e mi hai dato un grandissimo aiuto.
Sto provando ad implementare il tutto con alcuni framework, per il momento sto cercando di utilizzare Mootools...... vediamo che ne esce......

Discussione: slideshow in background con dissolvenza

Strumenti discussione

Ricerca discussione

Visualizza

slideshow in background con dissolvenza

Un DIV che "va' sopra" a un altro DIV

+ di somma, ma anche + di concatenzaione in JS

Permessi di invio