Usare il filtro opacity in Internet Explorer

Ho pubblicato un esempio pratico del suo utilizzo in precedenza. Mi sono dimenticato di specificare che perche funzioni il filtro opacity in internet explorer è necessario che il layer abbia settatto esplicitamente l'altezza e la larghezza. Negli altri browser invece questo funziona indipendentemente dal settaggio di altezza e larghezza.

La trasparenza puo essere settata direttamente anche attraverso un foglio di stile, senza disturbare javascript, in questo modo :

.opaco {
 opacity: .4;
 filter: alpha(opacity=40);
}

In questo esempio la trasparenza sarà al 40%, ed ovviamente stabile.

Charset

Gestire correttamente il charset per lo scambio di dati tra client, server web e server dati è molto importante.

Per siti solo in italiano, o al massimo in lingue europee il discorso è semplice. Basta settare in ogni componente del processo il charset corretto.

PHP : header('Content-Type: text/html; charset=iso-8859-15');
HTML: <meta equiv="Content-Type" content="text/html; charset=iso-8859-15">
MySQL: Collation latin1_swedish_ci

Il Charset iso-8859-15 gestisce correttamente tutte le lingue europee e include il simbolo dell'euro. Per esigenze piu complesse si puo usare l' UTF-8, ma raramente è necessario.

In teoria il webserver dovrebbe aggiungere gia tra gli header che invia di sua iniziativa il charset ma questo potrebbe essere differente da quello impostato in mysql o adirittura non essere settato (lasciando al browser il compito di capire quale charset meglio si adatti al contenuto che deve visualizzare) perciò specificarlo in modo esplicito è un ottima abitudine

Disabilitare la cache coi metatags

I linguaggi server-side come php o asp permettono di settare gli header e disabilitare la cache locale del browser, ma a volte puo essere servire disabilitarla da pagine html classiche.

Ecco cosa inserire nell'header :

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

In realta basterebbe il primo, ma su alcuni browers serve anche il secondo che con un work-around ottiene lo stesso risultato ( setta la scadenza della cache sulla pagine a 1 secondo prima dell'istante in cui viene scaricata )

Effetti di transizione tra le pagine

Attraverso questa direttiva

<meta equiv="Page-Enter" content="RevealTrans(Duration=Y,Transition=X)">

E' possibile definire un effetto di transizione tra le pagine tipo quelli delle presentazioni.

Sostituire a Y il numero di secondi di durata e a X il numero dell'effetto.

Due effetti gradevoli sono il 5 e il 12 ma ce ne sono molti altri.

Da sottolineare che Firefox non sembra supportare questa funzione, ma non causa errori, semplicemente la ignora.

FadeIn e FadeOut con javascript

Effetto carino da usare sul web.
Problema : Flash è uno sperco per una cosa cosi semplice, le gif animate pesano troppo.

Soluzione: Javascript e CSS !

Funzione de inizializzazione :

function initImage() {
// start
imageId = 'uno';
var uno = document.getElementById(imageId);
imageId = 'due';
var due = document.getElementById(imageId);
imageId = 'tre';
var tre = document.getElementById(imageId);
imageId = 'quattro';
var quattro = document.getElementById(imageId);
setOpacity(uno, 100);
setOpacity(due, 100);
setOpacity(tre, 100);
setOpacity(quattro, 100);
loop();
}

Prendiamo ad esempio 4 immagini con ID uno, due, tre e quattro. La prima, l'immagine di partenza avrà opacità 100, le altre 0.

L'opacità la andiamo a settare con questa funzione, che con particolari accorgimenti funziona sul 99.9% dei browser

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

La funzione Loop poi si preoccupa di far partire gli effetti di Fade-in e Fade-out in precisi momenti grazie alla funzionalità setTimeout.

function loop() {
fadeOut('uno',100);
fadeIn('due',0);
window.setTimeout("fadeOut('due',100)", 2000);
window.setTimeout("fadeIn('tre',0)", 2000);
window.setTimeout("fadeOut('tre',100)", 4000);
window.setTimeout("fadeIn('quattro',0)", 4000);
window.setTimeout("fadeOut('quattro',100)", 6000);
window.setTimeout("fadeIn('uno',0)", 6000);
window.setTimeout("loop()", 8000);
}

Il primo parametro è la funzione da richiamare, il secondo è il ritardo con cui farlo. Espresso in millisecondi.

Ed ecco le funzioni di fade in e fade out, molto simili tra loro. Utilizzano anch'esse il setTimeout

function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 5;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
} else {
return 0;
}
}
}

function fadeOut(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity >= 0) {
setOpacity(obj, opacity);
opacity -= 5;
window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 100);
} else {
return 0;
}
}
}

Mentre per quanto riguarda l'HTML la struttura deve essere questa:

Nel body ci va :
<body bgcolor="#ffffff" onLoad="initImage()">

e nel testo si mette una cosa del genere opportunamente adattata al vostro caso:
<div id="container" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:1; overflow:hidden; ">
<div id="Image1" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:2;"><img id='uno' src="images/HP_img1.gif"></div>
<div id="Image2" style="position:relative; left:0px; top:-322px; width:395px; height:322px; z-index:5; overflow: hidden;"><img id='due' src="images/HP_img2.gif"></div>
<div id="Image3" style="position:relative; left:0px; top:-644px; width:395px; height:322px; z-index:10; overflow: hidden;"><img id='tre' src="images/HP_img3.gif"></div>
<div id="Image4" style="position:relative; left:0px; top:-966px; width:395px; height:322px; z-index:15; overflow: hidden;"><img id='quattro' src="images/HP_img4.gif"></div></td>
</div>

Il container non è opzionale, come anche l'overflow:hidden.
Da notare anche il top progressivamente sempre piu negativo in modo che si sovrappongano.