Sickbrain.org

Questo trucco aumenta il supporto con Internet Explorer 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.

Technorati Tags: css, png

Articoli che potrebbero interessarti

• 12/10/2009 -- Uno stile per i form con i CSS (0)
• 11/10/2009 -- Hack dei CSS per Internet Explorer 3 e 4 (0)
• 27/08/2009 -- Creare un effetto su blocchi con sfumatura di tonalità (0)