Un effetto come la dissolvenza incrociata tra immagini che in Flash risulta semplicissimo da creare, diventa un po’ meno ovvio quando si voglia riprodurlo in una pagina html.
Per fortuna c’è sempre qualcuno che ci pensa prima di noi!

Image Cross Fader Redux è una combinazione Javascript+CSS che fa proprio questo, ed implementarla in una pagina web è semplicissimo:

1. richiamiamo i file .js e .css nei tag HEAD, come al solito;
2. racchiudiamo tutte le immagini che devono susseguirsi nella dissolvenza in un DIV con id=”imageContainer”;
3. modifichiamo nel file xfade2.css il valore di height per adeguarlo alle immagini che useremo.

link: http://slayeroffice.com/code/imageCrossFade/xfade2.html

Position:absolute fa in modo che il nostro blocco si posizioni nella pagina “come se fluttuasse” (infatti non lascia traccia - o spazio - della sua posizione effettiva nella pagina/codice html); si possono usare le proprietà left, right, top, e bottom per il posizionamento nella pagina.

Position:relative posiziona il blocco in relazione alla posizione originale sulla pagina html, cioè viene spostato, usando sempre le stesse proprietà left, right, top, e bottom.
Questo però lascia traccia (uno spazio vuoto) della posizione originale.

Tramite float un box e il suo contenuto vengono spostati di lato, e lo spazio che prima occupavano viene riempito dal contenuto successivo.
Questo parametro può servire nella costruzione di layout a colonne multiple affiancate.

La proprietà clear indica il comportamento degli elementi seguenti, e può assumere valori left, right, both e none.

Problema:
ho fatto un sito usando i frames ed ora che Google mi ha indicizzato i miei visitatori arrivano al sito passando per le pagine che dovrebbero essere contenute in un frameset, vedendole però singolarmente ciò al di fuori del frame contenitore.

Soluzione

Per ovviare al problema si può usare Javascript, facendo si che quando una pagina viene aperta fuori dal suo frameset, questa lo richiami, indicandogli anche quale pagina visualizzare al proprio interno (cioè essa stessa).

Siccome con WordPress ho sempre problemi a postare codice, scaricate i file zippati se volete vedere i due file di esempio: frame buster javascript

Come funziona?

Praticamente il frameset viene costruito in modo “dinamico” tramite JS.
Bisogna personalizzare var rightsrc= a cui bisogna indicare la pagina che vorremo contenuta di default, e ovviamente modificare il frameset secondo l’esigenza.

Il codice per la pagina “contenuta” va bene com’è, e si può usare per più pagine.

Ricordiamoci solo che il frameset deve chiamarsi index.htm, oppure bisogna modificare il codice anche in questo.

Con l’arrivo di Internet Explorer 7 finalmente si è avuta la possibilità di usare i file PNG trasparenti per la creazione di siti web, avendo una marcia in più per il fatto che finalmente il browser di casa Microsoft li supporta.

“Purtroppo” la versione 6 di MSIE (e anche 5.5) è ancora molto diffusa, e non tutti si sono ancora decisi a passare a FireFox, quindi per usare in modo proficuo i PNG trasparenti in pagine web bisogna lavorarci ancora un po’ sopra!

Fin’ora io ho sempre usato il PNG Behavior, che si inseriva con un CSS ed andava a tappare la falla in modo ottimale; purtroppo non lavorava su sfondi e aveva qualche pecca.

Mi pare notizia fresca (almeno, per me!) l’uso di una nuova tecnica che prevede il collegamento ad un file JS.

Purtroppo, da un mio rapido test, pare che nemmeno questa risolva l’uso di file PNG nel background, che non vengono duplicati ma allargati al 100% delle dimensioni che dovrebbero coprire!

…comunque sia, l’implementazione su WordPress è rapida e semplice.

Se volete altre soluzioni per risolvere la questione dei PNG trasparenti su IE6, eccoone altre:

• Unit PNG fix
  Usa un file javascript di solo 1 Kb, risolve qualche problema di funzionalità con l’attributo filter di Explorer, funziona anche con lo sfondo, consente di impostare ad auto l’altezza e la larghezza degli elementi
• IE PNG Fix from TwinHelix
  Questo script aggiunge un supporto “quasi nativo” dei file PNG trasparenti ad Explorer 5.5 e 6; la versione 2 include il supporto per lo sfondo (background position and repeat)
• Javascript IE PNG Fix
  (non più sviluppato dal suo autore)
  

Perchè il bellissimo menù a tendina che abbiamo creato non funziona su Explorer/windows?

Questa è semplicemente la domanda introduttiva ad un argomento pesante ma semplice.
Non starò qui a dilungarmi sulla facilissima creazione di dropdown menu con l’aiuto del javascript Suckerfish…

(potete informarvi qui: A list Apart: Suckerfish dropdown, Son of Suckerfish)

…ma mi butterò direttamente sul problema.

L’altro giorno stavo creando il mio menù a tendina, fatto di unordered lists (UL, LI), di CSS e del già rinomato Suckerfish.
Testo tutto su Firefox: sembra andare bene. Finito di digitare codici apro Explorer, provo la pagina, va da schifo!
Cosa è successo?!
Una cosa semplicissima, che non è menzionata nei due articoli segnalati: l’importanza del corretto DOCTYPE!

(more…)