Problema generale:
come si può far si che, senza l’utilizzo di Ajax, lo stile applicato ad un DIV definito in una pagina HTML o PHP cambi automaticamente ad intervalli definiti?
Soluzione generale:
utilizzando getElementById e javascript.
getElementById è un metodo dell’oggetto document, la pagina visualizzata, che cerca al suo interno un tag HMTL con un attributo ID assolutamente univoco.
Questo metodo può essere utilizzato per ricercare il DIV che si vuole modificare e cambiarlo indirizzandolo ad un nuovo stile definito nel CSS.
Con javascript definiremo delle mini funzioni che ci permetteranno di gestire temporalmente le variazioni di stile.
Esempio specifico: in una pagina JOOMLA come posso variare lo sfondo di un div ogni tot secondi facendo ciclicamente ruotare 2 o più immagini differenti?
Definiamo la situazione:
index.php contiene:
template.css contiene:
width: 940px;
height: 448px;
background:
url(“../images/1.jpg”) no-repeat;
}
prima di tutto devo creare nel file template.css un nuovo selettore ID per quante sono le immagini che ciclicamente faranno da sfondo al mio DIV, variando di volta in volta l’immagine di background, quindi:
width: 940px;
height: 448px;
background:
url(“../images/2.jpg”) no-repeat;
}
width: 940px;
height: 448px;
background:
url(“../images/3.jpg”) no-repeat;
}
eccetera…
Veniamo al succo del problema, come cambiare, ad interavalli regolari o no, ID al DIV.
Scriviamo delle semplici funzioni javascript che effettuino questa operazione:
F0, da richiamare con
in index.php subito dopo la definizione di
<div id=”sfondo1″>
setTimeout(‘changebkg1()’,15000);
}
F 1 – 2 – 3 da definire in ordine inverso nell’<head> di index.php o da richiamare dall’estero:
document.getElementById(‘sfondo3′).id = ‘sfondo1′;
setTimeout(‘changebkg1()’, 15000);
}
document.getElementById(‘sfondo2′).id = ‘sfondo3′;
setTimeout(‘changebkg3()’, 15000);
}
document.getElementById(‘sfondo1′).id = ‘sfondo2′;
setTimeout(‘changebkg2()’, 15000);
}
Tutto qui? Si, questo è tutto il codice da inserire per implementare il nostro sfondo a rotazione.
Certo il numero di selettori e di funzioni cresce all’aumentare delle immagini che vogliamo far
ruotare, ma in caso di numero molto alto questa soluzione si rivela immediatamente poco vantaggiosa da molti punti di vista e, purchè funzionante comunque al 100%, dovrebbe essere sostituita con un’altra
più complessa.
Spiego in breve la soluzione: la F0 ha il solo scopo di avviare l’esecuzione delle funzioni F1, F2 ed F3 che successivamente si richiameranno a loro volta in un ciclo che permetterà la rotazione circolare delle immagini di sfondo.
Le chiamate di funzioni vengono effettuate tramite il metodo setTimeout(code,millisec,lang) che permette di definire un tempo di attesa prima della chiamata, ci permetterà quindi di definire il tempo che dovrà trascorrere prima che un’immagine di sfondo venga sostituita con la successiva. Nell’esempio 15000 millisecondi = 15 secondi.
Il metodo getElementById ci permette di richiamare l’elemento desiderato e di cambiarne l’ID, quindi con l’istruzione:
il div “sfondo1″ assume l’aspetto dato dal selettore ID nel CSS “#sfondo 2″, nel nostro esempio i selettori sono identici, ma varia solo l’immagine di sfondo.
Qualsiasi consiglio su come migliorare questa soluzione oppure soluzioni alternative per lo stesso problema possono essere messi a disposizione di tutti lasciando un commento.
Buon divertimento! 
complimenti! ottimo tutorial!
Ciao Pasquale,
scusami ma vorrei chiederti qualche chiarimento: il tuo tutorial posso applicarlo anche al mio sito (www.andreaaloi.com) fatto con joomla? Vorrei infatti far cambiare ciclicamente l’immagine in alto ma non riesco a trovare i parametri che tu dici di modificare. In index.php non trovo infatti div id=”nome immagine sfondo”, mentre ho trovato sotto red.css le seguenti righe:
}
div#wrapbg{
background: url(../images/background_red.jpg);
background-repeat: repeat-x;
width: 100%;
Puoi aiutarmi?
Grazie mille e buone feste.
Andrea
Ciao Andrea,
nel tuo sito il div da personalizzare è wrapbg che inizia naturalmente da < div id = " wrapbg " > ed ha come background di default background_red.jpg.
Nel tutorial l’id=”sfondo1″ del div è solo un esempio, puoi eseguire esattamente la stessa procedura descritta utilizzando nel tuo caso per i diversi div:
id=”wrapbg”, id=”wrapbg2″, id=”wrapbg3″, ecc..
Quindi anche se i nomi cambiano la procedura resta la stessa
Ciao, ho seguito il tuo interessantissimo tutorial
ma non riesco a farlo funzionare..ho smontato e rimontato tutti i pezzi più volte ma niente le immagini non cambiano.
Ti sarei molto grato se dessi un’occhiata al sito in questione:
http://testmetreta.altervista.org
grazie e complimenti per il tuo lavoro
Emiliano
Ciao ottima soluzione e proverò subito, volevo chiedere ma si può ottenere il cambio a dissolvenza delle immagini?
fatemi sapere grazie
@Emiliano: hai risolto con Flash?
@ Daniele: no, la dissolvenza con questi script non è possibile.
HELP!
Il tuo tutorial è l’unico che faccia a caso mio, ma io non conosco Javascript e senza una demo da scaricare sono persa. E’ possibile avere un file dio esempio dove si vede esattamente dove mettere lo script Java?
Mi puoi aiutare?
Grazie
Lucia
Ciao Lucia, purtroppo in questo caso è impossibile fare un file unico perchè per esempio le modifiche al css devono essere applicate ad un file che già hai sul tuo sito.
Se mi dici su che pagina vuoi applicare la funzione posso darti riferimenti più precisi su come procedere.
Grazie
Ciao, la mia domanda è un pò banale, ma forse è una cosa che capita a parecchi: chi come me ha la velocità di connessione abbastanza scarsa gli sarà capitato di vedere le immagini metterci MOLTO TEMPO a caricarsi lasciando lo sfondo del sito in bianco per un pò di tempo.
Hai qualche consiglio in proposito?
Ho provato a diminuire il peso delle foto ma arrivati ad un certo punto si rischia di intaccare la risoluzione delle stesse…
Esiste un’effetto “fade” per esempio che nasconde il caricamento, o almeno lo rende un pò più leggero alla vista?
Grazie.
Ciao Leo, per la velocità di caricamento ti consiglio di ottimizzare le immagini e renderle più leggere, ne trarrà vantaggio l’intero sito, se ci mettono molto a caricarci allora hai ancora spazio per migliorarle.
L’effetto fade non è possibile con questo script, mi dispiace.