Newsgroup: it.lavoro.professioni.webmaster
Titolo: png 32 e IE6

Scusate la domanda banale, ma IE6 non supporta le png con trasparenza? (png
a 32 bit).
Ciao!
--
Wildchild
Openoffice.org: l'alternativa gratuita (e buona) a MS Office.
http://it.openoffice.org

 
No.
-- 
Spirito Libero
"La verità non sta in un solo sogno ma in molti sogni!"
(Le mille e una notte)

 No.
Sei sicuro? Proprio sicurosicurosicuro? O:-)
-- 
 \\
  \\__ Falco Stellare - 
falco.ste...@libero.it
       <<Togli il TAPPO per avere l'indirizzo giusto>>

 No.
Ma che schifo...
e pensare che dovrebbe essere uno standard.


Standard  ISO/IEC 15948
Io sicurissimo:o)
http://www.w3.org/TR/PNG
http://www.libpng.org/pub/png/png1999.html

 
http://www.libpng.org/pub/png/png1999.html
Ops! Non sono piu' cosi' sicuro...


 Ops! Non sono piu' cosi' sicuro...
E fai bene :-)
In realta' c'e' un modo per far accettare i PNG con alpha-channel a 32 
bit al buon vecchio IE, e funziona perfettamente, e' un vecchio trucco 
che scoprii non so piu' dove ne' quando. Basta ridefinire la classe IMG 
in questo modo:
// inizio codice
<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 ( ! new RegExp(blankSrc).test(src))
      fixImage();
};
function fixImage() {
   var src = element.src;
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }
   if ( ! new RegExp(blankSrc).test(src)) {
      realSrc = src;
   }
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      element.src = blankSrc;
      element.runtimeStyle.filter = 
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + 
"',sizingMethod='scale')";
   }
   else {
      element.runtimeStyle.filter = "";
   }
}
</script>
</public:component>
//fine codice
Notare l'immagine "blank.gif" richiamata dal codice. Si tratta 
semplicemente di una GIF trasparente, vuota, di dimensioni 1x1 pixel. La 
presenza di quest'immagine e' fondamentale per il funzionamento del 
workaround.
Praticamente e' comodo fare cosi': all'interno del sorgente HTML della 
pagina nella quale volete includere un'immagine PNG con le sue belle 
trasparenze, inserite una definizione di STYLE per la classe IMG in 
questo modo:
<style type="text/css">
	img {
	behavior: url("pngbehavior.htc");
	}
</style>
Poi create un semplice file di testo in plain-ASCII vuoto, ci incollate 
dentro il codice che ho riportato prima, e poi lo salvate con nome 
"pngbehavior.htc"; un semplice file di testo da mettere nella stessa 
directory del file HTML che lo richiama. Occhio sempre al name case, non 
ve lo devo nemmeno dire.
Quindi create l'immagine GIF trasparente vuota di 1x1 pixel e mettetela 
nella directory delle immagini del vostro sito (tipicamente "images", 
sottodirectory della root). La posizione in realta' non e' influente, 
l'importante e' che sia richiamata correttamente nel testo del codice 
del file pngbehavior.htc, senno' ovviamente il sistema non la trova.
Fatto questo, qualsiasi PNG inseriate nella vostra pagina HTML verra' 
correttamente interpretata da Internet Explorer con tutte le sue 
trasparenze correttamente applicate.
Attenzione che se utilizzate effetti tipo un meta blendtrans per 
l'entrata e l'uscita dalla pagina, IE fa un brutto effetto visivo, dato 
che in entrata mostra la PNG completamente bianca finche' la pagina non 
e' completamente caricata, e in uscita fa la stessa cosa. Questo 
perche' il browser non e' in grado di applicare la filtratura 
dell'alpha-channel durante la fase di fade-in e fade-out della pagina.
L'utilizzo di file PNG a 32 bit in associazione con il posizionamento 
tramite CSS offre un potentissimo strumento di sviluppo grafico per le 
pagine web, con risultati di grande impatto visivo altrimenti 
impossibili ad ottenersi.
Non resta che sperimentare e ricordate: mai dire mai! ;-)


Falco Stellare wrote:

Perdona la mia inqualificabile ignoranza, ma i tag del codice da te 
postato a quale linguaggio appartengono?


 Non resta che sperimentare e ricordate: mai dire mai! ;-)
Copiato, incollato e salvato, una perla ;-)
p.s. non credo userò mai sta tecnica cmq stupenda lo stesso, se funziona (non ho
provato)