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.
Ritieni questo post utile o interessante?
Condividi e Segnala
alpha channel, IE 6, PNG fix, png trasparenti
Leggi anche:
PNG trasparenti anche con Internet Explorer 6
::: NOTA BENE :::Il metodo a seguire è stato migliorato e spiegato nella pagina PNG TRASPARENTI SU IE6: LA SOLUZIONE DEFINITIVA, soluzione funzionante anche nel caso di PNG usate come sfondi CSS. :::::::::::::::::::: La più grande noia per un webdesigner che ricorrre al CSS per disegnare i propri layout è la diversità con cui ogni browser gestisce [...]
dei commenti -
lascia un commento - trackback
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!
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.
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!
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!
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
grazie mille, ho fatto la prova con un lavoretto che stavo facendo e funziona! Speriamo di non trovare altri problemi con sto IE… ciao!
bel post
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…
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!
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.
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
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 !!!!!
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.
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’…
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.
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…
non so perche’ nel post precedente non mi ha segnato la stringa di codice…
la riscrivo:
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.
ciao,
niente ?… siete ancora in vacanza ?…
scusatemi, resto in attesa…
Buone feste a tutti !
T
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
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
grazie 1000 !!
ci provo e ti faccio sapere !
Ciao R.A.M.
ho cercato di inserirlo nel tag IMG, ma probabilmente sbaglio qualcosa…ti scrivo il codice di uno dei tasti png con roll, saresti così gentile da inserirmi tu nel posto giusto il tuo codice ?
Grazie infinite…
p.s.: ma e’ giusto che tu metta nel tuo esempio da inserire .jpg al posto di .png ?
div id=”essesu” style=”position:absolute; width:200px; height:115px; z-index:2; left: 67px; top: 240px;”>
ma perche’ copiando il codice non me lo incolla qui ??
scusa, quella era una parte, vabbe’ te lo scrivo a manina…
…
a href=”gall3d.htm” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage
(’Image2′,” ,’rendlogo/galleria3droll.png’,1)” img src=”rendlogo/galleria3d.png” name=”Image2″ width=”290″ height=”162″ border=”0″
scusa, ma per inviarlo ho dovuto togliere i …non capisco perche’…
beh, dimmi se capisci, senno’ amen, non so piu’ che fare…
grazie per la pazienza…
nulla ?… scusa, forse la mia incompetenza e’ troppa ed e’ difficile spiegare scrivendo…:))
Grazie lo stesso, mi hai comunque aiutato molto.
emm..mi vergogno quasi a dirlo…ma non è che sono inesperta…di più :-s
Sto facendo un sito a un mio amico (faccio grafica cartacea, sul web sto quasi a zero), ho una png come sfondo di una tabella…quindi niente css…copio i due file nella cartella delle immagini e poi??
Cosa scrivo nel codice? Solo la piccola stringa che hai meso su (img, div…etc)? E dove la vedo inserire?
Grazie
jeyjey, vedo che hai anche tu dei problemi, ma sembrano irrisolvibili…sembra che tutti sappiano ma…
Tranquilli !! Non vi rubiamo il lavoro dopo che ci dite dove cacchio infilare la stringa !! :)))
L’ho sempre detto che dovevo nascere imparato…
Ti posso dire che per quello che serve a te, visto che non hai tasti rollover, devi aprire la cartella con esplora e cercare un file note, aprirlo e dentro troverai una stringa di codice. Quel codice lo devi buttare dentro nel body, dove c’e’ tutto il resto del codice con cui stai creando il sito.
Scusa la spiegazione terra terra, anche io non sono uno che fa siti, sono un grafico 3d, ma se ti serve una mano riscrivi, che se non ci aiutiamo tra noi…
Ciao,
ho la versione standalone di ie6 e, come gia detto in un comento, l’hack non funge.
Sapete consigliarmi un modo per testare se l’hack funziona correttamente?
…un emulatore forse?
Grazie
io ho usato questo procedimento, ma ho riscontrato alcuni problemi..
1- i miei bottoni png non sono piu link
2- un menù fatto semplicemente da una png e poi facendo il rollover con un background il link non funziona!
come si rimedia???
insomma non funzionano i link che sono racchiusi in png background.
come risolvere con questo metodo???
almeno per quanto riguarda la visibilità dei link, prova a mettere “position: relative” al contenitore