png trasparenti su ie6: soluzione definitiva
Dopo varie soluzioni o PNG fix provate per ottenere l’alpha channel sulle immagini in formato PNG ovvero la PNG trasparenti funzionanti sull’ancor diffusissimo IE Internet Explorer 6 posso affermare di aver individuato quella definitiva.
Nel precedente post PNG trasparenti anche con Internet Explorer 6 era stato preso in esame il problema e proposte un paio di soluzioni funzionanti: l’unico difetto rimaneva l’impossibilità di ottenere PNG trasparenti quando usati come sfondo di elementi HTML tramite il CSS.
Grazie al sito TwinHelix Designs sono venuto a conoscenza di questo nuovo PNG fix che, con piacevole sorpresa, permette il rendering adeguato dell’ alpha channel nel vetusto browser Microsoft.
Il procedimento è lo stesso del precedente post: scarichiamo il file iepngfix.zip, scompattiamolo e prendiamo i 2 file necessari per visualizzare il canale alpha delle PNG su IE6: blank.gif, una GIF trasparente necessaria per far funzionare l’hack, e iepngfix.htc: quest’ultimo file viene usato insieme alla proprietà behaviour, un’esclusiva estensione made in Microsoft che ci permette di correggere questi vizi senza disturbare l’operato di altri browser.
Inseriamo questi file nella stessa directory dove si trova il file che caricherà le PNG di cui vogliamo visualizzare l’ alpha channel, quindi inseriamo nel codice CSS la stringa:
e il gioco è fatto!
In questo caso, oltre agli elementi IMG, è necessario associare il behavior anche ai DIV, se occorre la trasparenza su altri elementi basta assegnargli questa proprietà.
ATTENZIONE…
Se si vuole assegnare uno sfondo trasparente ad un qualsiasi elemento della pagina, è probabile che questo debba stare sopra gli altri elementi, avere quindi uno z-index maggiore e un position: absolute.
Purtroppo l’applicazione forzata di questo filtro per l’ alpha channel causa un bug in alcuni elementi figli di quello con posizione assoluta, per la precisione i collegamenti presenti in questi blocchi smettono di funzionare.
Per risolvere il problema si ricorre all’ennesimo hack, di cui potete trovare informazioni esaustive sul sito Satz an Satz. Cerca: alpha channel, IE 6, PNG fix, png trasparenti
Ritieni questo post utile o interessante?
Condividi e Segnala
Leggi anche:
- Non ci sono articoli correlati
dei commenti -
lascia un commento - trackback
July 23rd, 2008, 12:08 am
Ciao, ho letto il nuovo articolo ma non capisco una cosa, e per cercare di risolvere spiego cosa ho bisogno:
ho un menu di navigazione gestito tramite e ho due con all’interno rispettivamente due link A. Nel mio css stato normale di a c’è un’immagine e in a:hover c’è la stessa immagina ma con proprietà background-position: left bottom per effettuare il rollover. Entrambe le immagini assegnate sia per a normale ke per a:hover sono delle .png. Sono immagini che hanno delle PARTI trasparenti, e non tutte, quindi io vorrei capire se questo hack funziona applicando la trasparenza ALLO SFONDO, e non a tutta l’immagine come ho letto in giro che accade.
NOn capisco poi perchè continui a parlare di tag IMG qui se le immagini sono associate a sfondi con i css… grazie!
July 23rd, 2008, 10:16 am
Si parlava di tag IMG perchè così la trasparenza è applicata anche alle PNG dell’HTML, non solo a quelle che fungono da background, è una soluzione unica.
Non capisco cosa intendi per applicare trasparenza all’immagine o allo sfondo…se l’immagine fa da sfondo non sono lo stesso file?
L’hack permette di visualizzare il canale alpha channel (la trasparenza sui colori in pratica, non un colore trasparente come le GIF) allo stesso modo dei browser moderni quindi come lo vedi su Firefox o IE7 è come lo vedrai su IE6 tramite il fix.
July 23rd, 2008, 10:34 am
perdonami, spero di aver capito…
Quindi questo fix funziona tramite la gif 1×1 trasparente e il file .htc e rende trasparente le zone che originariamente nella png sono state definite come trasparenti? Ti spiego, perche ho letto in giro che invece rende trasparente tutta l’immagine. Io invece ho delle zone di sfondo ai miei due pulsanti (sia in stato normale che over) che avevo reso trasparenti ma IE6 me le da bianche e l’effetto non è certo carino…
Poi quindi in questo caso devo attribuire nella regola sia img, che il tag a? al posto del div intendo perchè il mio contenitore è a….
ciao e grazie!
July 24th, 2008, 2:00 am
Sì ad entrambe le domande :)
e comunque, basta che fai una prova su un browser moderno, l’effetto che otterrai con IE6 è lo stesso, dopo il fix ovviamente.
Buon lavoro!
August 5th, 2008, 9:06 am
Grazie per l’aiuto ho risolto brillantemente il mio problema. Ho visto che questo sistema viene utilizzato anche sul sito Apple per sovrapporre al fondo le belle immagini dei prodotti: http://www.apple.com/it/macbookpro/
http://www.apple.com/it/macbookpro/styles/macbookpro.css
mi ero sempre chiesto come facessero.
Ciao
Gioweb
August 5th, 2008, 7:21 pm
grazie mille, ho fatto la prova con un lavoretto che stavo facendo e funziona! Speriamo di non trovare altri problemi con sto IE… ciao!
August 20th, 2008, 10:11 am
bel post
October 10th, 2008, 11:25 pm
ciao, ho riscontrato altri problemi con questo hack.
Ho scoperto che quando serve un effetto rollover, sia che stia usando una sola immagine (e poi usare il trucco left bottom per cambiare stato) sia che usi due immagini per creare sempre il rollover, con l’hack non funziona. Non va proprio nè il rollover, e se stai usando una sola immagine per fare l’effetto, tutta la tua immagine viene “schiacciata” a forza entro l’altezza del contenitore ke la contiene… cioè ti ritrovi i due link nel contenitore, quando in realtà :hover dovrebbe farti slittare in su il primo stato a favore del secondo…
Nessuna soluzione?
che noia infinita sto ie6, quando mai l’hanno pensato.
l’unica cosa mi viene in mente un bel commento condizionale per dare solo ad ie uno stato diverso, perche non si può compromettere l’effetto per tutti gli altri bw…
October 14th, 2008, 10:42 pm
Ciao a tutti.
Vorrei segnalarvi questo strumento come aiuto per una soluzione definitiva e senza traumi del problema pngfix in ie: dynamite4css.sourceforge.net.
E’ un framework molto interessante che ho iniziato ad usare nel corso della mia attività lavorativa; in sostanza, se ben configurato, crea in automatico una pngfix.
Dopo aver semplicemente analizzato i file CSS che gli si assegnano, Dynamite4css cerca in essi una proprietà background o background-image che contenga un path ad un file con estensione PNG.
Crea quindi un CSS dinamico che viene automaticamente linkato alla pagina e lo utilizza per assegnare via PHP differenti proprietà a differenti browser. Provare per credere!
October 15th, 2008, 9:26 am
Grazie Luca, mi hai incuriosito: darò un’occhiata approfondita a questo framework e se lo riterrò utile per il nostro lavoro ne parlerò proprio su queste pagine.
December 3rd, 2008, 1:06 pm
mitico….mi hai salvato il sederino….dopodomani ho la presentazione di una demo….e ora sono pronto
avevo il problema del menu, un fancymenu di mootools, il quale si caricava delle png dal css……con questo ,htc miracoloso ora funziona…….
Grazie e ancora grazie
December 21st, 2008, 1:15 pm
ciao a tutti,
ho letto e scaricato il file Dynanite4css, ma non ci capisco una mazza !!! io sto rifacendo il mio sito con Dreamweaver ed ho una marea di immagini png, che ovviamente su quella ciofeca di IE6 non funzionano.
Non conoscendo il linguaggio html, sto usando la progettazione grafica, quindi non so dove piazzare questo benedetto Dynamite ! Potete darmi una mano, vi prego !!!!!
December 21st, 2008, 6:14 pm
Per funzionare il sistema basta scaricare il file sopra segnalato, gli unici file che realmente ti occorrono sono blank.gif e iepngfix.htc facendo attenzione al percorso che gli dai (se usi la cartella images sarà url(images/iepngfix.htc) ), modifichi il css come detto sopra e funziona.
Se stai usando la versione di Explorer 6 di cui parliamo al post Come installare più versioni di Internet Explorer mi spiace dirti che con quello non funziona, come non funziona su emulazioni dello stesso su sistemi Linux: su IE6 originale non ci sono problemi.
December 21st, 2008, 8:07 pm
Grazie R.A.M. Page,
potresti fare un altro piccolo sforzo? lo so che rompo, ma non capisco dove mettere il percorso…
Ti spiego:
Quando inserisco un’immagine rollover in un frame, la quale ha un link ad un’altra immagine da far comparire su un altro frame, il percorso che dici tu “url images/iepngfix.htc” dove lo devo specificare ?
Io ho immagini statiche da piazzare solo sullo sfondo, ed altre che invece si animano pure e linkano verso altre pagine o frames !
Grazie per la gentilezza, se ti servisse qualche dato o file d’esempio te li posso inviare in privato se si puo’…
December 22nd, 2008, 8:11 pm
O lo specifichi nel file .css, se ce n’è uno collegato, oppure direttamente dentro la pagina tra i tag
Leggi anche questo vecchio tutorial che avevo scritto, di cui questa “soluzione definitiva” è un aggiornamento.
December 23rd, 2008, 1:51 am
allora…innanzitutto grazie, ora qualcosina sono riuscito a capire, quindi ho inserito i due file (htc e gif) nella cartella dove ho le immagini .png.
Rimane il problema della stringa.
prendo ad esempio un tasto rollover fatto con due immagini .png il cui codice e’ :
<a href="io.htm" rel="nofollow">
o almeno e’ quello che mi viene fuori come codice cliccando sopra il tasto…
La domanda e’:
mi potresti cortesemente scrivere la stringa da inserire e dove inserirla per risolvere la trasparenza?
La devo inserire per ogni immagine png o la metto dentro al codice da qualche parte e mi viene riconosciuta automaticamente da tutte le immagini png ?
Scusa l’estrema ignoranza, ma se mi parli di grafica3d sono preparato, mentre se parliamo di programmazioni e codici sono ancora in fase di sviluppo, (diciamo che ho appena cominciato).
Grazie infinite…
December 23rd, 2008, 1:53 am
non so perche’ nel post precedente non mi ha segnato la stringa di codice…
la riscrivo:
December 23rd, 2008, 1:57 am
vabbe’ non la riesco a postare…
>img src=”rendlogo/menuio.png” name=Image3″ width=….ecc, ecc
la cartella principale dove ci sono i file png e htc e gif e’ rendlogo.
December 29th, 2008, 11:45 am
ciao,
niente ?… siete ancora in vacanza ?…
scusatemi, resto in attesa…
Buone feste a tutti !
T
January 1st, 2009, 6:36 pm
ciao,
sono riuscito a dare la trasparenza alle immagini .png, pero’ non mi funzionano correttamente i tasti rollover, cioe’ quando passo sopra il mouse mi cambia l’immagine ma rimane così anche quando tolgo il mouse e quindi alla fine ho tutti i tasti che mi rimangono “accesi”.
Grazie
T
January 5th, 2009, 2:09 pm
Ciao Totò,
essendo un hack in questo metodo per i PNG trasparenti ci sono dei limiti tipo quello da te citato.
Puoi risolvere comunque così: sul tag IMG, non A che rappresenta il collegamento, inserisci:
onMouseOver=’src=\"immagine_over.jpg\"’ onMouseOut = ’src=\"immagine_out.jpg\"’
Esempio completo:
<a href="#"><img src="immagine_out.jpg" onMouseOver=’src=\"immagine_over.jpg\"’ onMouseOut = ’src=\"immagine_out.jpg\"’ /></a>
Fammi sapere