Newsgroup: it.comp.grafica
Titolo: IE6 e png con trasparenza

Salve a tutti,
cerco di spiegare velocemente quale è il problema che mi sta 
arrovellando il cervello.
Sto realizzando il sito per un locale del mio paese.
www.oldcrownpub.com/beta/
per ora mi sto occupando solo dell'aspetto grafico sono ad una versione 
ancora di creazione degli stili css.
Il problema riguarda il formato delle immagini che devono compoorre la 
testata del sito in cui ho un immagine di sfondo e due loghi che devo 
posizionare uno a sinistra e l'altra destra. La scelta, visto il numero 
di colori, non può che essere tra jpeg e png.
Ho usato il formato jpeg per l'immagine di sfondo e il logo di sinistra 
mentre il png per il logo di destra e qui ho un bel problemone:
con IE 6 per win la png non è trasparente ma ha lo sfondo grigio.
Con Firefox per Mac e PC nessun problema e con Safari per Mac idem.
Addirittura con IE 5.2 per Mac non ho problemi.
Vi chiedo prima di tutto se anche voi con IE 6 per win vedete lo sfondo 
grigio nel logo di destra; poi se qualcuno conosce un modo per risolvere 
l'arcano.
Grazie
Fabrizio

 ha scritto nel messaggio
news:j90ue.27350$b5.12...@news3.tin.it...

Ciao,
leggi questo:
http://forum.html.it/forum/showthread.php?s=&threadid=721321



Allora, il server di HTML è giù, ora ti spiego cosa devi fare per
caricare la trasparenza di un PNG.
IE6 non supporta le trasparenze PNG, ma ha degli AciveX chiamati
"AlphaImageLoader".
1) Per prima cosa crei un file che chiami "pngfix.js".
Dentro incolli questo codice:
----BEGIN CUT HERE---
// 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 = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);
---END CUT HERE---
(mi raccomando anche il commento coi crediti :) )
2) salvi il file nella root del sito o dove vuoi. Ricordati dopo di non
sbagliare il percorso del file quando lo richiamerai nella pagin HTML.
Per il nostro esempio, facciamo finta che tu lo abbia salvato nella root,
insieme alla tua pagina.html
3) Apri la pagina.html, e proprio sopra il tag di chiusura dell'header
(questo: </head>)
Incolli questo testo:
----BEGIN CUT HERE---
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
----END CUT HERE---
Ed il gioco è risolto.
La funzione if carica il file solo se la pagina viene aperta da IE 5.5 o
superiori.
Non evi aggiungere nulla all'<img> tag del PNG, fa tutto da solo.
Unico inconveniente: la proma volta che il PNG viene
caricato, sfarfalla per una frazione di secondo, finché il filtro
AlphaLoader di IE non entra in azione.
Ciao,
-- 
 Bak [ ICQ 13249673 ]
"Orwell was an optimist"
  Kibo

 ha scritto nel messaggio
news:j90ue.27350$b5.12...@news3.tin.it...


Bakunin ha scritto:

Ti ringrazio, lo provo subito.
non pensavo che lavorare con le png fosse così complesso con IE :)
Ciao
Fabrizio

Fabrizio Martina ha scritto:

Perfetto, funziona molto bene.
thx ancora.
Fabrizio
PS cosa ne pensate della grafica che c'è ora?
Consigli e critiche a volontà