RollOver con css - preload

[Eugene]

Buongiorno

In un sito ho inserito una specie di rollOver gestito da css.
Funziona very wonderful, ma quello che mi chiedo è:
è possibile fare un preload della gif alternativa come viene fatto con i rollOver in java di dreamweaver?
Basta inserire onLoad nel body per risolvere tutto?

Grazie

[pierofix]

Originariamente inviato da Eugene
rollOver in java di dreamweaver?

Ah, perchè DW usa java per i rollover? Forse ti riferivi a javascript?

Con i CSS non è possibile realizzare dei preload in quanto le immagini di rollever gestite dai fogli di stile sono usate come sfondi, non come elementi del documento.

Il fatto è che ottimizzando le immagini e sfruttando il fatto che al primo accesso le immagini stesse vengono tutte salvate in cache, il preload diventa una pratica inutile e insensata.

[Eugene]

Originariamente inviato da pierofix
Ah, perchè DW usa java per i rollover? Forse ti riferivi a javascript?

Infatti mi riferivo proprio a quelli, avevo dimenticato di specificarlo.

In ogni caso, la mia paura è che queti rollOver in css possano dal luogo allo spiacevole effetto di "sparizione" del tasto al passaggio dal momento che non se lo trova già caricato.

Solitamente uso i rollOver in js ma in questo caso specifico mi torna più utile usare quello con i css.

Mi auguro no si riveli una scelta infelice.

[pierofix]

La scelta a mio avviso è invece OTTIMA.

Quel che voglio dirti è che l'"inconveniente" potrebbe verificarsi solamente nella prima pagina visitata, in quanto poi le immagini verranno salvate nella cache e poi l'effetto sarà immediato nei documenti seguenti.

Vuoi ridurre ancora l'inconveniente? Ottimizza meglio le immagini. Le immagini sono già ben ottimizzate? L'inconveniente non è allora da considerarsi tale.

[Eugene]

E allora mi fido di te!

Effettivamente il rollOver con i css ha l'ulteriore vantaggio di eliminare tutto il codice js che viene caricato dalla pagina, mentre con i css si risolve tutto in un paio di righe.

Adesso sono più convinto che mai!

[Mich_]

Comunque a mio parere se fai un preload in JS, questo serve anche se l'immagine e` poi usata da CSS: un'immagine (come qualsiasi file) nella cache e` comunque a disposizione del browser (purche` abbia lo stesso path).

Conviene pertanto dare sempre indirizzi relativi alla homepage (quelli che iniziano per /).

Nota: un JS di preload non inficia l'accessibilita`: se non viene precaricata, l'immgine verra` caricata nel momento in cui serve.

[pierofix]

Daccordissimo sul discorso accessibilità, ma vale davvero la pena di usare javascript per questi scopi? Non credo che sia un grosso problema aspettare il caricamento di un documento se questo è costruito secondo la "nuova filosofia": tutto è già stato studiato e ponderato in precedenza, compresa la buona ottimizzazione delle immagini.

Insomma, è vero che non dà fastidio a nessuno, ma non è forse un po' una sporcatura?

[Crashtest]

di trucchetti per evitare il problema del preload nei css ce ne sono molti...


se il preload riguarda dei semplici tasti quello che ti consiglio è questo:

se ad esempio abbiamo un tasto di 160 x 25 pixels con un rollover, creiamo già una gif di 160 x 50px (il doppio in altezza)che contiene sopra l'immagine a riposo e sotto l'immagine "hover"

a questo punto nel livello si gioca con i valori del background-position, guarda quest'esempio, dove c'è un tasto del menu che si chiama "chisiamo"

.chisiamo a:link, .chisiamo a:visited, .chisiamo a:active
{
display: block;
text-decoration: none;
background: url(template_img/sxnav/chisiamo.jpg) no-repeat;
background-position: 0px 0px;
}
.chisiamo a:hover
{
display: block;
background-position: 0px -25px;
}

praticamente l'immagine chisiamo.jpg è alta 50px, al suo interno alle coordinate x 0 e y 0 c'è l'immagine a riposo, alle coordinate x 0 e y 25 c'è l'immagine hover.

nel css, in a:hover, non faccio altro che far "slittare" in alto, di 25 px, l'immagine, che è sempre la stessa.

[Mich_]

Originariamente inviato da pierofix
... ma vale davvero la pena di usare javascript per questi scopi? Non credo che sia un grosso problema aspettare il caricamento di un documento se questo è costruito secondo la "nuova filosofia": ...

In caso che l'utente sia collegato con una linea lenta, puo` capitare di dover aspettare la nuova immagine. Anche un'attesa di un secondo puo` dare fastidio (non vedere un "rollover" puo` far credere di aver sbagliato qualcosa).

Quindi un "preload" di qualche tipo ci puo` stare bene.
Quella di Crashtest e` una soluzione (validissima). Il preload in JS e` un'altra.

La soluzione con lo shift dell'immagine richiede un minimo di capacita` di programmazione in piu`, ed a volte una revisione dei CSS; inoltre potrebbe creare qualche problema in browser con limitato supporto di CSS (come stanno i browser "leggeri" in fatto di posizionamento delle immagini?).
Quella del preload JS e` piu` simile a come si programmava il rollover con JS.

[Crashtest]

scusa, cosa intendi per browser leggeri?