Blog

PNG e supporto per Internet Explorer 6

05/01/2009 by Egidio Murru in CSS e XHTML

Questo trucco aumenta il supporto con Internet Explorer 6 per il formato grafico più potente in circolazione. Questo è senza dubbio il formato PNG.
Il formato PNG può avere un canale alpha a 8 bit che gli permette di rendere le immagini semi-trasparenti. La trasparenza permette all’immagine di avere bordi antialias, e ciò rende l’immagine più professionale.

Utilizzo

Il segreto per l’uso è un filtro introdotto in IE55 che è chiamato AlphaImageLoader. Questo particolare filtro prende un immagine con il canale alpha e la visualizza. Ha anche la capacita di decidere come rendere le dimensioni in scala dell’immagine.

<img src="blank.gif" style="width: 100px; height: 100px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />

Per avere riferimenti più dettagliati guarda MSDN.

Nota che la fonte vera è messa nel parametro src del filtro e un immagine vuota è usata come attributo src per l’immagine. Un’altra cosa da notare è che la dimensione dovrebbe essere regolata di modo che il filtro possa essere applicato. Un ulteriore ragione per disporre la dimensione è di potenziare l’immagine per poter prendere la dimensione dell’immagine reale e non di quella vuota.

Funzionamento

Ora dobbiamo disporre il funzionamento che controlla tutto questo dietro le scene. Ciò di cui abbiamo bisogno è di controllare il src e se è un immagine PNG noi aggiungiamo il filtro e cambiamo il src in un immagine vuota. Per vedere quando il src cambia, facciamo attenzione al onpropertychange. Se il src non è un immagine PNG rimuoviamo il filtro. Per far tutto più semplice modifichiamo l’oggetto runtimeStyle invece che l’oggeto style. L’oggetto runtimeStyle può essere considerato come una parte di uno stile a cascata che ha precedenza rispetto allo stile normale. Quando disponete il runtimeStile i vecchi valori sono ancora contenuti nell’oggetto style, perciò una volta che il runtimeStyle è stato cancellato i vecchi valori sono applicati come normali.

Qui sotto c’è la sorgente completa per il funzionamento. Nota che questo agirà solo se stai usando IE55+ su una piattaforma Win32.

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
if (!supported) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;

// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if ( /.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

</script>
</public:component>

Utilizzo

L’utilizzo è abbastanza semplice. Tutto ciò che hai bisogno di fare è di aggiungere il formato PNG all’elemento immagine.

<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style>

Attenzione

Nota che il funzionamento utilizza un immagine chiamata “blank.gif”. Questa immagine dovrebbe essere posta nella stessa directory in cui è la pagina web che fa riferimento al behavior file, altrimenti devi modificare il percorso.

Non dovresti applicare altri filtri visivi all’immagine PNG perché questi non supportano il canale alpha e il risultato sarà poco soddisfacente.