Privacy Policy

Immagine background a rotazione automatica su DIV con CSS

22 gennaio 2010

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:

< div id="sfondo1">

template.css contiene:

#sfondo1 {
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:

#sfondo2 {
width: 940px;
height: 448px;
background:
url("../images/2.jpg") no-repeat;

}
#sfondo3 {
width: 940px;
height: 448px;
background:
url("../images/3.jpg") no-repeat;
}

eccetera…

Veniamo al succo del problema, come cambiare, ad intervalli regolari o no, ID al DIV.

Scriviamo delle semplici funzioni javascript che effettuino questa operazione:

F0, da richiamare con

< script type="text/javascript">changebkg()

in index.php subito dopo la definizione di

changebkg () {
setTimeout('changebkg1()',15000);
}

F 1 – 2 – 3 da definire in ordine inverso nell' di index.php o da richiamare dall’estero:

function changebkg3() {
document.getElementById('sfondo3').id = 'sfondo1';
setTimeout('changebkg1()', 15000);
}

function changebkg2() {
document.getElementById('sfondo2').id = 'sfondo3';
setTimeout('changebkg3()', 15000);
}

function changebkg1() {
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:

document.getElementById('sfondo1').id = 'sfondo2';

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! 🙂

15 Comments

  • Reply Andrew 2 dicembre 2010 at 19:46

    complimenti! ottimo tutorial!

  • Reply Andrea 22 dicembre 2010 at 18:12

    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

  • Reply Blays 22 dicembre 2010 at 22:44

    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 🙂

  • Reply Emiliano 5 gennaio 2011 at 11:55

    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

  • Reply Daniele 16 gennaio 2011 at 01:32

    Ciao ottima soluzione e proverò subito, volevo chiedere ma si può ottenere il cambio a dissolvenza delle immagini?

    fatemi sapere grazie 🙂

  • Reply Blays 22 gennaio 2011 at 20:22

    @Emiliano: hai risolto con Flash? 🙂

    @ Daniele: no, la dissolvenza con questi script non è possibile.

  • Reply Lucia 18 giugno 2011 at 14:21

    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

  • Reply Blays 19 giugno 2011 at 17:06

    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 😉

  • Reply Leo 20 dicembre 2011 at 18:15

    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. 🙂

  • Reply Blays 22 dicembre 2011 at 20:30

    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.

  • Reply Inserire un background a rotazione? 23 giugno 2012 at 16:18

    […] […]

  • Reply daniele zara 20 ottobre 2012 at 08:22

    Ciao Blays, ho provato a seguire il tuo consiglio ma….sicuramente ho sbagliato qualcosa. Questo è il mio sito: http://motociclettando.altervista.org/index.php
    l’immagine che voi cambiasse è quella della home page (index.php). Ho modificato cos’ il codice (index):

    changebkg()

    function changebkg3() {
    document.getElementById(‘sfondo3′).id = ‘imCell_3′;
    setTimeout(‘changebkg1()’, 2000);

    }

    function changebkg2() {
    document.getElementById(‘sfondo2′).id = ‘sfondo2′;
    setTimeout(‘changebkg3()’, 2000);
    }

    function changebkg1() {
    document.getElementById(‘sfondo1′).id = ‘sfondo3′;
    setTimeout(‘changebkg2()’, 2000);
    }

    template.css:#imCell_3 {
    width: 940px;
    height: 448px;
    background:
    url(“gallery/44688_1583072345081_3063291_n.jpg”) no-repeat;
    }

    #sfondo2 {
    width: 940px;
    height: 448px;
    background:
    url(“gallery/45890_1583070225028_4182137_n.jpg”) no-repeat;
    }

    #sfondo2 {
    width: 940px;
    height: 448px;
    background:
    url(“images/DSCN1879.jpg”) no-repeat;
    }

    Sai indicarmi dove ho sbagliato?
    grazie mille
    Daniele

  • Reply Blays 20 ottobre 2012 at 08:49

    Ciao Daniele,
    ho notato almeno 2 cose da correggere:
    1 – nel codice della tua pagina nelle funzioni javascript al posto degli apici ci sono dei caratteri strani, vanno eliminati.
    2 – la funzione changebkg() non è definita per richiamare la funzione successiva, quindi non parte nessuna chiamata.
    Ti consiglio di rileggere con calma la guida e seguirla passo passo. Ciao e grazie!

  • Reply Piero 23 novembre 2013 at 07:21

    Ciao, ottimo tutorial, ma anch’io non riesco ad utilizzarlo, per mia incapacità. Utilizzo un template gratuito di joomla. Se hai voglia di guardarci e mi scrivi in privato ti mando i dati di accesso. Grazie

  • Reply Alessandro 28 marzo 2015 at 23:54

    Ciao,
    scusami ma ho trovato e riesumato questo argomento solo adesso.
    Volevo chiederti se applicando questa soluzione ad un sito sviluppato con joomla si possono avere dei cambi di background con date fisse (es. pasqua, natale etc.) invece che a tempo.
    Grazie mille

  • Leave a Reply