Ciao aki,
se tutto ciò che devi fare è cambiare l'immagine di sfondo di tutti quegli elementi, ti do un modo veloce (forse non tanto per il client) per farlo, ovvero: seguendo le ramificazioni.
Sappi che oltre a
getElementById, JavaScript dispone di una comoda funzione
getElementsByTagName che ritorna una collezione contenente tutti gli oggetti DOM aventi lo stesso tagName. Per esempio, il seguente codice assegna alla variabile "prova" tutti gli elementi H3 della pagina:
var prova = document.getElementsByTagName("h3");
// A questo punto, tutti gli H3 contenuti in "prova" sono accessibili anche tramite indice
var primoH3 = prova[0];
Con questo principio, e con una marea di cicli FOR, mettiamo su la nostra funzione di cambio dello sfondo (nel mio esempio la funzione richiede due parametri:
fatherID l'ID dell'elemento padre,
newBgImage la nuova immagine di sfondo, entrambi di tipo string).
var sostituisciSfondoModuleH3 = function(fatherID, newBgImage) {
var father = document.getElementById(fatherID);
if (!father) return;
var modules = father.getElementsByTagName("*");
for (m=0; m<modules.length; m++) {
if (modules[m].className != "module") continue;
var divs1 = modules[m].getElementsByTagName("div");
for (d1=0; d1<divs1.length; d1++) {
var divs2 = divs1[d1].getElementsByTagName("div");
for (d2=0; d2<divs2.length; d2++) {
var divs3 = divs2[d2].getElementsByTagName("div");
for (d3=0; d3<divs3.length; d3++) {
var h3s = divs3[d3].getElementsByTagName("h3");
for (h=0; h<h3s.length; h++) h3s[h].style.backgroundImage = newBgImage;
}
}
}
}
}
... ok... masticando un po' di JavaScript si capisce che non è un lavoro indifferente per il povero client che si trova a dover ciclare per un numero incredibile di volte, contando anche che la funzione dovrebbe essere chiamata due volte, una per leftcolumn e una per rightcolumn altro consiglio: scarica jQuery e usalo, permette di selezionare gli elementi DOM esattamente come nei CSS, così per selezionare e modificare quei maledetti H3 basterà una riga del genere:
$("#leftcolumn .module div div div h3, #rightcolumn .module div div div h3").css("backgroundImage",newBgImage);
PS.: mi è poi venuto in mente un secondo metodo, più grezzo del primo ma anche meno impegnativo, che non necessita un framework come jQuery ma che potrebbe errere fallaceo, dopo vedremo come.
var sostituisciSfondoModuleH3 = function(fatherID, newBgImage) {
var father = document.getElementById(fatherID);
if (!father) return;
var h3s = father.getElementsByTagName("h3");
for (i=0; i<h3s.length; i++)
if (h3s[i].style.backgroundImage=="../images/h3.jpg")
h3s[i].style.backgroundImage = newBgImage;
}
Come potrebbe fallire: