cambio immagine sfondo tabella

[renato.ferrua]

ciao a tutti/e,
ho i seg stili applicati ad una tabella per dargli un' immagine di sfondo.
vorrei che ogni 30 secondi l' immagine di sfondo cambiasse ciclicamente
sfondo1->sfondo2->sfondo3->sfondo1.......
possibilmente con qualche effetto di transizione.

non voglio usare flash.
grazie.

.sfondotop1 {
background-image: url(../img/sfondo_n1.jpg);
background-repeat: no-repeat;
width: 929px;
height: 403px;
}

.sfondotop2 {
background-image: url(../img/sfondo_n3.jpg);
background-repeat: no-repeat;
width: 929px;
height: 403px;
}

.sfondotop3 {
background-image: url(../img/sfondo_n3.jpg);
background-repeat: no-repeat;
width: 929px;
height: 403px;
}

[Mich_]

Chiaramente la cosa non e` fattibile con i soli CSS. E` necessario un po' di JS.

Puoi scegliere due strade:
- cambiare la classe attribuita all'oggetto:
document.getElmentById('IDOGGETTO').className = 'nuovaclasse';
- attribuire uno sfondo diverso all'oggetto:
document.getElmentById('IDOGGETTO').style.Backgrou ndImage = 'nuovaimmagine';
(nota che nelle sintassi proposte tutto e` case-sensitive !!)

naturalmente devi tener conto che JS potrebbe non essere abilitato: in tal caso la pagina deve funzionare lo stesso, ma chiaramente non avverra` il cambio di sfondo.

Nel CSS proposto, ad ogni cambio vengono cambiate vari attributi: non e` conveniente, dato che molti attributi sono uguali e il cambiamento porta a caricare il client senza motivo.

Quindi se il tuo oggetto e`:
<table id="tabellavar" ...>
dovrai dapprima assegnare una formattazione iniziale:

#tabellavar {
  background-image: url(../img/sfondo_n1.jpg);  /* sfondo iniziale (fisso se manca JS) */
  background-repeat: no-repeat;
  width: 929px;
  height: 403px;
}

Poi ciclicamente farai cambaire il solo sfondo, come specificato sopra.

NOTA1: Avrai il problema di precaricare gli sfondi, altrimenti l'effetto ai primi cambi sara` molto brutto: ci sono vari sistemi, ma nel tuo caso la soluzione migliore potrebbe essere di usare JS.

NOTA2: 30sec sono un tempo molto breve: rischi di saturare il client e di far "ballare gli occhi" all'utente: pensa ad un tempo piu` lungo

[renato.ferrua]

la tua spiegazione è chiara ma c'e' qualche cosa che sbaglio...

la tabella:
<table width="929" border="0" cellspacing="0" cellpadding="0" id="sfondotop" name="sfondotop">
..............
...............
................
</table>

nel css:
#sfondotop {
background-image: url(../img/sfondo_n1.jpg);
background-repeat: no-repeat;
width: 929px;
height: 403px;
}

nel body come semplice prova:
prova

se ho capito bene cliccando il link dovrebbe cambiare l' immagine... ma non lo fa....

cosa sbaglio??

[Mich_]

No, se usi sintassi di quel tipo non arrivi a nessun risultato valido.

Gli attributi HTML di formattazione non sono compatibili con i CSS, quindi toglili.
L'attributo name= non e` applicabile per gli scopi che ti prefiggi: la sintassi JS dice
getElementById
get = ricava
Element = elemento, oggetto - in questo caso tag
By = attraverso
Id = l'attributo id (non il name, che tra l'altro non eisste piu` nelle nuove versioni di HTML)

[renato.ferrua]

più che altro facevo cattivo utilizzo di




oltre ai problemi da te segnalati il problema stava nella sintassi della funzione

getElementById


la sintassi che alla fine ho usato è:
getElementById("franco").style.backgroundImage="ur l('img/sfondo_n1.jpg')";



alla fine sono riuscito ad elaborare lo script, come volevo inizialmente.
con preload e tempo di rotazione più lungo l' effetto è accattivante.

grazie per l' aiuto...