Fix per PNG trasparenti su Internet Explorer

Matteo - 26 Aprile 2005

Non mi pronuncio sulla qualità di Internet Explorer. È un browser estremamente popolare e sarebbe un suicidio fare un sito che non si vede bene su tale browser. Di base, su IE non si vedono bene le immagini in formato PNG con un canale alpha ad 8 bit. Questo vuol dire che quantunque si faccia uso di immagini a trasparenza variabile (facilissime da realizzare e comodissime da utilizzare), sarà necessario fare attenzione a come saranno visualizzate su IE.

Risolvere il problema non è banale, ma una volta capito non presenta grossi ostacoli. Per le immagini inserite nel testo con tag IMG standard, è necessario aggiungere il seguente codice nella sezione HEAD, come javascript:

	<!--[if gte IE 5.5000]>
<script type="text/javascript" xsrc="pngfix.js"></script>
<![endif]-->

Dove il file pngfix.js contiene il seguente codice (con credits):

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = ""
img.outerHTML = strNewHTML
i = i-1
}
}
}

window.attachEvent("onload", correctPNG);

Per i png nei CSS il problema è un pò più complicato ed è necessario utilizzare tag specifici di IE. Ogni immagine png che volete usare come background va sostituita da un "none" nella voce background e va aggiunta, nello stile, una voce:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
sizingMethod='scale', xsrc='img.png');

dove img.png è appunto l'immagine da utilizzare. Ad esempio, se si ha una voce nel foglio di stile:

#logo {
background: transparent logo.png no-repeat top left;
}

va successivamente aggiunto nella parte HEAD il seguente codice:

    <!--[if gte IE 5.5]>
<style type="text/css">
#logo {
background: transparent none no-repeat top left;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
sizingMethod='scale', xsrc='logo.png');
}
</style>
<![endif]-->

PS: il codice JavaScript fornito NON gestisce eventuali PNG utilizzate come MAPPE. Poichè viene sostituita l'immagine essenzialmente con uno span con un certo background, non è possibile utilizzare direttamente la MAP html con immagini png trasparenti su IE utilizzando questo fix.

PPS: Juna ha aggiunto qualcosa in un nuovo koan

 

domanda

Salvatore Savino (www.fresh-de - 1 Ottobre 2006 11:58

mi chiedevo se sistemando il codice della pagina e del css in questa maniera, non possa influire negativamente sulla corretta visualizzazione su altri browser diffusi come Firefox, Safari e Opera.
Non mi resta che provare.

FUNZIONA!!!

www.fresh-dezign.com - 1 Ottobre 2006 14:04

Ho impiegato questo Fix ed ora sono riuscito ad implementare correttamente la trasparenza di PNG a 24 bit su IE6. Anche sugli altri browser rimangono correttamente visualizzate, in quanto l'if nel body agisce solo su IE, mentre il css a parte si preoccupa degli altri browser! Ed in ogni caso qui ci sta un bel "IE SUCKS!" Speriamo che la versione 7.0 sia valida.

con firefox funziona?

claudio - 16 Ottobre 2006 19:03

Ultima soluzione con i css risolve il problema con IE ma nn con funziona + con Firefox :-(

dovrebbe?

Matteo - 17 Ottobre 2006 19:35

Sicuro di aver messo bene i tag riconosciuti da explorer? Gli altri browser dovrebbero interpretare la roba in mezzo come un commento.
Parlo di <!--[if gte IE 5.5]> e <![endif]-->.

x claudio

www.fresh-dezign.com - 21 Ottobre 2006 19:28

nell'if devi aggiungere l'attributo background:transparent, al di fuori dell'if, la stessa classe per il png avrà le stesse identiche proprietà, escluso appunto background: transparent.
Così solo IE6 applicherà la trasparenza, visto che gli altri browser lo fanno già di default.

non mi funzionano i link

ilario - 17 Novembre 2006 17:16

non funzionano i link, sapete dirmi come mai?

posizionamento

max - 10 Dicembre 2006 18:37

.dottoressa {
background: transparent none no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/dottoressa.png", sizingMethod="scale");
background-position: 225px bottom;
}

il posizionamento su ie non mi funziaona su firefox si perchè?

re: posizionamento

Matteo - 10 Dicembre 2006 20:51

Da www.htmlhelp.com :
Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

Ovvero per la specifica css non puoi mischiare parole come bottom con un numero esplicito di pixel come hai fatto te. Evidentemente Firefox è meno rigido.

Tra l'altro nel tuo caso avresti potuto mettere la posizione insieme al resto delle proprietà di background.

Grazie di cuore

Nicky - 1 Marzo 2007 17:40

grazie per aver condiviso questo codice con noi.... è utilissimo!!!

anche a me non funzionano p&ug;

rosa - 21 Marzo 2007 17:44

Ho messo anch'io un css come consigliato per avere un background trasparente, ma tutti i menu che avevo sopra non funzionano più, è come se non vedesse più i links! Come risolvo?

Non va

andrea - 22 Marzo 2007 14:27

NON vaaaaaaaaaaaaaaaaaaaaaaaaaa

provate questo

Matteo - 22 Marzo 2007 19:58

Se non vi funziona l'ultimo e

Matteo - 16 Maggio 2007 20:03

C'è una x di troppo nel codice (xsrc='logo.png').

Il codice è

<!--[if gte IE 5.5]> <style type="text/css"> #logo { background: transparent none no-repeat top left; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod='scale', src='logo.png'); } </style> <![endif]-->

Per permettere ai link(e altro

Nz - 4 Novembre 2007 11:03

Aggiungete nei css

a {position: relative;}

così vi funzioneranno i link, lo stesso vale per pulsanti...

basta aggiungere l'attributo

position: relative;

Background non funziona!

Paolo - 11 Gennaio 2008 12:36

L'ultima parte non funziona, con IE il png di sfondo non ha la trasparenza.
In più, utilizzando il background nel body, il png non mantiene le sue dimensioni, diventa piu piccolo.

mi sparisce l'immagine

ale - 15 Febbraio 2008 01:09

importo il .js ..
metto un'immagine tramite tag img..
e sparisce quando carica la pagina!
come mai?!!
Weblog Koan Progetti Foto Contatti