FORSE OT: PNG & Trasparenze Internet Explorer

Salve a tutti,

ho da poco iniziato a lavorare con le png ed ho notato che Internet Explorer non le supporta..come al solito si ricorre al Javascript ma non funziona in maniera eccellente perchè se l'immagine è più di una bisogna attendere il caricamento di tutta la pagina prima che l'azione dello script venga effettuata.

Lo Script è:

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      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);

Inoltre questo sistema esclude gli eventi impostati nelle immagini poichè riscrive il tag.

Cosa fare?

 :bye:

inviato 10 anni fa
ulisse
X 0 X

Hai ragione, è OT

 :bye:

risposto 10 anni fa
Gianni Tomasicchio
X 0 X

Cosa fare?

E' un problema complesso senza una semplice soluzione e la colpa sai di chiè?  ::)

Per un sito ho trovata la soluzione dentro msdn, ma francamente non ricordo il link alla soluzione, ti riporto quello che ho fatto io, copiando dal sito della microsoft.

Crei un file htc, ad esempio: pngbehaviour.htc

<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 = "../images/trasparente.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>

All'inizio del file, c'è una variabile che punta ad una gif trasparente: var blankSrc = "../images/trasparente.gif"; ovviamente la devi creare tu, perché il "sistema" ricopierà questa gif trasparente sopra le immagini png, rendendole di fatto trasparenti amche per IE5 e superiori.

Ora devi richiamare il file dentro alle tue pagine, fai così:

<img alt=' ' src='images/immagine.png' style="behavior: url('script/pngbehavior.htc')" />

In pratica ogni file png, richiama attraverso la pseudo proprietà behaviour dei fogli di stile il file png preparato prima.

Sembra macchinoso ma in fondo non lo è, e ogni immagine puoi benissimo caricarla attraverso un loop se proveniente da un database.

Considera che a questo metodo non c'è rimedio, nel senso che alla microsoft hanno volutamente perduto il "treno" delle immagini png a favore delle limitatissime gif, e non sembra che nemmeno con la futura versione 7 di IE vogliano prendere questo treno.

Considera anche che se pure IE7 supporterà in pieno lo standard png, molti utenti per anni utilizzeranno ancora le vecchie versioni di IE, quindi è un problema che ci porteremo appresso ancora per diversi anni.

risposto 10 anni fa
Marco Grazia
X 0 X

Ciao Marcolino

grazie per la dritta ma non mi funziona anzi mi sostituisce l'immagine dopo il caricamento con l'immagine trasparente. in cosa sbaglio?

Inoltre le immagini le carica con uno sfondo grigio e successivamente le modifica.

Grazie

risposto 10 anni fa
ulisse
modificato 10 anni fa
X 0 X

prova a dare un'occhiata a questo...

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

 :bye:

risposto 10 anni fa
Xscratch
X 0 X

Grazie ora provo e ti faccio sapere!

 :bye:

risposto 10 anni fa
ulisse
X 0 X

Niente da fare! il file pngbehaviour.htc mi sostituisce il mio file png con il pixel trasparente!  :idiot:

 :bye:

risposto 10 anni fa
ulisse
X 0 X

posta il codice

risposto 10 anni fa
Xscratch
X 0 X

E be deve sostituirla, o meglio deve sovrascriverla, vai qui: http://www.stilisticamente.com/ (non è pubblicità Gianni) e se ci vai con IE e fai proprietà della bussola. vedrai che ti da il nome dell'immagine gif e non della bussola.

Però mi chiedo se hai fatto tutto giusto, dai posta un po' di codice

risposto 10 anni fa
Marco Grazia
X 0 X

E' un pò difficile inviarvi il codice anche perchè è tutto integrato. Posso dire i passi che ho fatto ma sembra molto strano il comportamento dello script.

Dunque dunque:

Ho creato un file con il nome: pngbehaviour.htc

con il seguente contenuto:

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>

/*
 * PNG Behavior
 *
 * This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
 * for WebFX (http://webfx.eae.net)
 * Copyright 2002-2004
 *
 * For usage see license at http://webfx.eae.net/license.html
 *
 * Version: 1.02
 * Created: 2001-??-??   First working version
 * Updated: 2002-03-28   Fixed issue when starting with a non png image and
 *                      switching between non png images
 *          2003-01-06   Fixed RegExp to correctly work with IE 5.0x
 *          2004-05-09  When printing revert to original
 *
 */

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
            navigator.platform == "Win32";

var realSrc;
var blankSrc = "images/blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
   if (!supported || isPrinting) 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 && /\.png$/i.test(src)) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if (/\.png$/i.test(realSrc)) {
      // 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 = "";
   }
}

function beforePrint() {
   isPrinting = true;
   element.src = realSrc;
   element.runtimeStyle.filter = "";
   realSrc = null;
}

function afterPrint() {
   isPrinting = false;
   fixImage();
}

</script>
</public:component>

dopo in un file css ho scritto:

img {
  behavior: url("javascript/pngbehaviour.htc");
}

Ho creato un file da un pixel trasparente e l'ho chiamato: blank.gif

Ho fatto solamente questo.

L'effetto che ho è la sostituzione del file png con l'immagine da un pixel. Per ogni immagine png trovo un pixel al suo posto.

Forse non ho ben capito la funzionalità del sistema.

 :bye:

Tutto qua

risposto 10 anni fa
ulisse
X 0 X

guarda cosa ho trovato in merito su google:

http://www.google.it/search?hl=it&q=pngbehaviour.htc&btnG=Cerca+con+Google&meta=

non so che dire a me funziona, però ammetto che quello è l'unico sito che ho realizzato con questa tecnica, e che non ho più approfondito, anche perché spero di non doverla più utilizzare.

risposto 10 anni fa
Marco Grazia
X 0 X

Grazie lo stesso a tutti.

Proverò a trovare un altra soluzione. :(

risposto 10 anni fa
ulisse
X 0 X

se non ricordo male questo mi capitava quando non specificavo le dimensioni delle png...controlla o posta anche l'html...

 :bye:

risposto 10 anni fa
Xscratch
X 0 X

se non ricordo male questo mi capitava quando non specificavo le dimensioni delle png...controlla o posta anche l'html...

 :bye:

Confermo! serviva anche a me (grazie per la segnalazione...) ed in effetti DEVI specificare le dimensioni dell'immagine, perché funzioni!

 :bye:

risposto 10 anni fa
myne.it
X 0 X

 O0

risposto 10 anni fa
Xscratch
X 0 X

ci sto provando! wait...  :buck:

risposto 10 anni fa
ulisse
X 0 X

OHHHHHHHHHHH FINALMENTE!!!

BISOGNA CREARE UN TUTORIAL PER TUTTI I RAGAZZI CHE SI SONO TROVATI IN QUESTE CONDIZIONI!  O0

GRAZIE A TUTTI

risposto 10 anni fa
ulisse
modificato 10 anni fa
X 0 X

OHHHHHHHHHHH FINALMENTE!!!

BISOGNA CREARE UN TUTORIAL PER TUTTI I RAGAZZI CHE SI SONO TROVATI IN QUESTE CONDIZIONI!  O0

GRAZIE A TUTTI

Stiamo tutti aspettando  ;D

risposto 10 anni fa
Marco Grazia
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda