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.

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.