ZOD - Bug fix: trasparenza delle immagini PNG in Internet Explorer

Home

Ricerche sviluppo

Bug fix: trasparenza delle immagini PNG in Internet Explorer

Menu Lab

Donazione Paypal

Hei! Hai trovato qualcosa di utile nel mio sito?

Siti realizzati...

RSS Feeds

Bug fix: trasparenza delle immagini PNG in Internet Explorer

mercoledì 09 maggio 2007

Attenzione: 1 agosto 2008. Ormai propongo di usare la plugin pngfix di Jquery, quindi i metodi spiegati in questa pagina li ritengo obsoleti. Per maggiori info consultare il sito http://jquery.andreaseberhard.de/pngFix/

Il formato PNG è uno standard W3C già da molti anni, permette immagini di ottima qualità in due versioni: 8 bit e 24 bit, ha una buona compressione, si presta per utilizzi web, e la trasparenza delle PNG 24 può dare grandi soddisfazioni a chi sviluppa siti web.
Però le PNG hanno trovato un grosso ostacolo nella loro diffusione, un bug di visualizzazione in Internet Explorer nelle versioni precedenti alla 7.

PNG a 24 bit, una caratteristica davvero utile.

Queste immagini hanno una peculiarità: permettono trasparenze migliori delle GIF (che sono limitate a 256).
Ad esempio posso mettere senza problemi la mia PNG 24 sopra uno sfondo chiaro, uno scuro, oppure sopra un'immagine colorata ed ottengo sempre una sfumatura impeccabile.
Le applicazioni web possono essere molteplici: ombre o bagliori esterni ai loghi, fotografie che sfumano su altre ecc...

Internet Exlporer nelle versioni precedenti alla 5.5 non riesce a vedere correttamente le PNG, e non abbiamo alcun rimedio. Ma per la 5.5 e 6 possiamo utilizzare un hack che corregge il problema, è possibile tramite un css, un javascript, ed una immagine Gif trasparente di 1x1 pixel. Ringraziamo http://www.twinhelix.com per la soluzione.

PASSO 1.

Inserire nell'head della pagina o nel file css la seguente riga, è sufficiente assegnare i marcatori img e div.


 img, div { behavior: url(iepngfix.htc); }

PASSO 2.

Inserire il file "iepngfix.htc" nella posizione che abbiamo appena definito (nell'esempio è la stessa cartella dove abbiamo la pagina o il css).
Il file contiene le seguenti righe:

<public:component>

<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4

// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.

// For details, see: http://creativecommons.org/licenses/LGPL/2.1/

// This must be a path to a blank image. That's all the configuration you need.

if (typeof blankImg == 'undefined') var blankImg = 'pxt.gif';

var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)

{

 if (filters[f])

 {

  filters[f].enabled = s ? true : false;

  if (s) with (filters[f]) { src = s; sizingMethod = m }

 }

 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';

}

function doFix()

{

 // Assume IE7 is OK.

 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||

  (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')

 {

  if ((/\.png$/i).test(src))

  {

   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')

    style.width = offsetWidth + 'px';

   filt(src, 'scale');

   src = blankImg;

  }

  else if (src.indexOf(blankImg) < 0) filt();

 }

 else if (bgImg && bgImg != 'none')

 {

  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))

  {

   var s = RegExp.$1;

   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')

    style.width = offsetWidth + 'px';

   style.backgroundImage = 'none';

   filt(s, 'crop');

   // IE link fix.

   for (var n = 0; n < childNodes.length; n++)

    if (childNodes[n].style) childNodes[n].style.position = 'relative';

  }

  else filt();

 }

}

doFix();

</script>

</public:component>

PASSO 3.

Nello script troviamo una variabile "blankimg" contiene il path della gif trasparente, dobbiamo crearne una ed inserirla nel nostro sito. Fatto questo le PNG in tutto il sito sono sistemate da IE 5.5 in su.
Nota: controllare bene di non sbagliare i path ai file: css, htc, gif trasparente.

Ho fatto uno zip con i file da utilizzare, potete scaricarlo qui:

iepngfix

Altra soluzione

Ci sarebbe un altro script che risolve le png normali, ma anche quelle di background, e quelle con mappe.
Grazie a Youngpup (http://www.youngpup.net ) e Drew McLellan (http://www.allinthehead.com )
Il principio è lo stesso, inserire i javascript presenti nello zip, e l'immagine gif trasparente.

ultimatepngfix

Attenzione! Utilizzando questi script di norma funziona tutto, ma in un caso ho riscontrato un grosso problema (era fatto in doctype Xhtml 1.1) ma non ho indagato la causa degli errori che mi dava IE6. Inserendo uno di questi script il sito smetteva di funzionare, andava in conflitto con molti elementi della pagina: campi delle form bloccati, collegamento dei link eliminato, testo non selezionabile. L'evenienza potrebbe ripetersi quindi usate doctype differenti (ad esempio 1.0 transitional) e come sempre... testate bene.

Aggiungi ai preferiti (188) | Visualizzazioni: 11634

Commenti (4)

1. 31-01-2008 21:29

Sito perfecto!

Ospite

Indirizzo e-mail protetto dal bots spam , deve abilitare Javascript per vederlo

2. 06-08-2008 10:08

Grazie

Grazie risolto un gorsissimo Problema

Ospite

Spad

3. 12-03-2009 22:06

grazie!!!

grazie. Stavo diventando matto e quasi avevo pensato di cambiare la grafica del sito. :cry

Con questo hack ho potuto risolvere il problema.

Ospite

stefano

4. 27-03-2009 09:42

... però sconsiglio...

Questo hack in ogni caso lo sconsiglio vivamente, io non lo utilizzo più da molto tempo.

Sebbene il pngfix sembri risolvere il problema con IE6, molto spesso accade che provochi vari effetti collaterali nel rendering della pagina: immagini sballate e altri elementi come links, forms inutilizzabili.
Quindi per avere una png "semi-corretta" ritengo inopportuno rendere instabile l'intero sito.

Cosa propongo in alternativa:

A) fare i furbi usando css diversi con i background dei div: mettiamo la png in quello default, e una gif o jpg preparata ad hoc per il css di ie6 (si veda la tecnica dei commenti condizionali). Così senza hack js diamo a IE6 il downgrade che vuole.

B) invece di inserire una png inserire un swf. Infatti mettendo la png in un flash che fa da mero contenitore il tutto funziona a meraviglia, le trasparenze vengono mantenute, anche in IE6 se si tratta di swf (usando il wmode=transparent).

In base al caso oggi io uso queste due tecniche.

Ospite

Zod

Scrivi Commento

Si prega di inserire commenti riguardanti l'articolo. Commenti ritenuti offensivi verranno eliminati. E' severamente vietato qualsiasi tipo di spam. Cose del genere verranno cancellate. Assicurati di aggiornare(refresh) la pagina per visualizzare un nuovo codice. Ovviamente questo accade se hai inserito il codice errato.
Nome:
E-mail
Sito web
Titolo:
Commento:
Codice:*

< Prec.