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.
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.
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.
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?
secondi facendo ciclicamente ruotare 2 o più immagini differenti?
Definiamo la situazione:
index.php contiene:
< . div id="sfondo1" . >" (eliminare i punti)
template.css contiene:
#sfondo1 {
width: 940px;
height: 448px;
background:
url("../images/1.jpg") no-repeat;
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;
url("../images/2.jpg") no-repeat;
}
#sfondo3 {
width: 940px;
height: 448px;
background:
url("../images/3.jpg") no-repeat;
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 effetuino questa operazione:
F 0, da richiamare con
< . script type="text/javascript">changebkg() (eliminare i punti)
in index.php subito dopo la
definizione di < . div id="sfondo1" . >" (eliminare i punti)
definizione di < . div id="sfondo1" . >" (eliminare i punti)
changebkg () {
setTimeout('changebkg1()',
15000);
15000);
}
F 1 – 2 – 3 da
definire in ordine inverso nell'<head> 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.
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.
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! :)
