Joomla.it Forum

Joomla! 1.0.x (versione con supporto terminato) => I Template di Joomla 1.0.x => Le voci di Joomla.it (solo per versione Joomla 1.0.x) => templates - tips & tricks => : joomlapixel 15 Jan 2007, 23:01:31

: Utilizzare png trasparenti anche con IE
: joomlapixel 15 Jan 2007, 23:01:31
E' una cosa sulla quale mi sono ripromesso di tornare,risolvere il fastidioso effetto Su IE delle png trasparenti.
Preferisco a dire il vero utilizzare questo formato immagine al posto delle gif,ma come molti sanno in IE (ma và?) non venivano visualizzate bene.
Vi segnalo un tutorial interessante e molto pratico per risolvere
http://www.hongkiat.com/blog/2006/12/17/making-png-image-transparency-work-in-internet-explorer/
: Re: Utilizzare png trasparenti anche con IE
: rider111 19 Feb 2007, 17:21:38
C'è un mambot che aiuta in questo, si chiama "botCorrectPNG", ed aiuta proprio in quei casi in cui si usano PNG ma in IE non vengono visualizzate bene.
: Re: Utilizzare png trasparenti anche con IE
: joomlapixel 22 Feb 2007, 07:43:59
Grazie per la segnalazione
: Re: Utilizzare png trasparenti anche con IE
: vinfel 11 Mar 2007, 15:25:51
Ho installato e pubblicato il plugin ma le PNG tasparenti restano com'erano.Bisogna settare qualcos'altro dopo l'installazione e la pubblicazione del mambot?

Grazie
: Re: Utilizzare png trasparenti anche con IE
: netbog 30 Mar 2007, 14:11:00
Mi permetto di contribuire postando un esempio con l'utilizzo della trasparenza direttamente su un tag IMG. Da precisare che il tag <IMG> dovrà necessariamente essere contenuto in un blocco: span, div, ul ecc..
L'esempio riportato e' con il DIV.

Occorre inserire un commento condizionale che interprera' solamente IE nell'HEAD della pagina web. Posto un esempio di pagina completa.


<HEAD>
<!--[if gte IE 5.5]>
<style type="text/css">
DIV#top-bottom{display:block;width:250px;height:80px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLo ader(src='logo.png'); }
DIV#top-bottom img{width:250px;height:80px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
</style>
<![endif]-->
</HEAD>
<HTML>
<div id="top-bottom">
<img src="logo.png" border="0" width="250" height="80" alt="logo" />
</div>
</HTML>

Un altro metodo potrebbe essere quello dell'utilizzo di un file in Javascript per rendere la trasparenza su tutte le immagini. E' comodo solo che richiede javascript abilitato sul browser dell'utente (IE sempre)
Ecco il link dove ho preso la documentazione in inglese: http://homepage.ntlworld.com/bobosola/index.htm

Ciao!
Marco
: Re: Utilizzare png trasparenti anche con IE
: joomlapixel 11 Apr 2007, 18:14:05
Ottimo
grazie
: Re: Utilizzare png trasparenti anche con IE
: TheShark 28 Apr 2007, 08:15:56
Io ho risolto con questo plugin, funziona bene.
http://www.joomlaworks.gr/mint/pepper/tillkruess/downloads/download.php?uri=http%3A//www.joomlaworks.gr/files/bot_ultimatepngfix_2.0.zip (http://www.joomlaworks.gr/mint/pepper/tillkruess/downloads/download.php?uri=http%3A//www.joomlaworks.gr/files/bot_ultimatepngfix_2.0.zip)
: Re: Utilizzare png trasparenti anche con IE
: simoegio 01 Jun 2007, 15:37:46
Io ho risolto con questo plugin, funziona bene.
http://www.joomlaworks.gr/mint/pepper/tillkruess/downloads/download.php?uri=http%3A//www.joomlaworks.gr/files/bot_ultimatepngfix_2.0.zip (http://www.joomlaworks.gr/mint/pepper/tillkruess/downloads/download.php?uri=http%3A//www.joomlaworks.gr/files/bot_ultimatepngfix_2.0.zip)

a me questo pacchetto da il problema che la prima volta che carico la pagina con IE la PNG non viene trasformata, se aggiorno tutto perfetto.. è un problema mio o è così??
: Re: Utilizzare png trasparenti anche con IE
: thepisu 07 Jun 2007, 14:31:11
Io ho risolto in modo ancora più semplice, mettendo il fix Javascript direttamente nell'header HTML del template... Così sono sicuro che viene caricato...

:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<?php echo $mosConfig_live_site?>/templates/madeyourweb/js/pngfix.js"></script>
<![endif]-->

Ed ecco in allegato il file PNGFIX, io ho creato una sottocartella JS nella cartella del template...

[allegato eliminato da un amministratore]
: Re: Utilizzare png trasparenti anche con IE
: milkplus 08 Jun 2007, 00:04:30
Salve a tutti, ho provato vari metodi, il bot Ultimate PNG Fix, il pngfix.js segnalato anche in questa discussione, tutti funzionano. Le immagini nel formato png si vedono correttamente tranne che nell'header, il logo infatti sparisce. Qualcuno può aiuatarmi?
: Re: Utilizzare png trasparenti anche con IE
: thepisu 08 Jun 2007, 09:12:55
Salve a tutti, ho provato vari metodi, il bot Ultimate PNG Fix, il pngfix.js segnalato anche in questa discussione, tutti funzionano. Le immagini nel formato png si vedono correttamente tranne che nell'header, il logo infatti sparisce. Qualcuno può aiuatarmi?

Potrebbe essere una questione di "z-index" nei CSS, anche io ho dovuto sudare una volta per ottenere le giuste sovrapposizioni... Se vuoi farci avere il link diamo un'occhiata..
: Re: Utilizzare png trasparenti anche con IE
: milkplus 08 Jun 2007, 21:34:31
Potrebbe essere una questione di "z-index" nei CSS, anche io ho dovuto sudare una volta per ottenere le giuste sovrapposizioni... Se vuoi farci avere il link diamo un'occhiata..

Grazie, proverò in questo week-end! il sito attualmente non ha questo template dato che lo sto prima provando in locale.

Devo dire che lo stesso problema l'ho riscontrato con il template rokwebify, cioè se attivo il bot ultimatePNG o il pngfix.js anche qui ho problemi dello stesso tipo  :'( .
Sinceramente farei prima a modificare il logo nell'header cosi il bot o lo script funzionerebbero correttamente..ma non è una  soluzione!
: Re: Utilizzare png trasparenti anche con IE
: evildark 16 Nov 2007, 15:06:41
Mi permetto di contribuire postando un esempio con l'utilizzo della trasparenza direttamente su un tag IMG. Da precisare che il tag <IMG> dovrà necessariamente essere contenuto in un blocco: span, div, ul ecc..
L'esempio riportato e' con il DIV.

Occorre inserire un commento condizionale che interprera' solamente IE nell'HEAD della pagina web. Posto un esempio di pagina completa.


<HEAD>
<!--[if gte IE 5.5]>
<style type="text/css">
DIV#top-bottom{display:block;width:250px;height:80px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLo ader(src='logo.png'); }
DIV#top-bottom img{width:250px;height:80px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
</style>
<![endif]-->
</HEAD>
<HTML>
<div id="top-bottom">
<img src="logo.png" border="0" width="250" height="80" alt="logo" />
</div>
</HTML>

Un altro metodo potrebbe essere quello dell'utilizzo di un file in Javascript per rendere la trasparenza su tutte le immagini. E' comodo solo che richiede javascript abilitato sul browser dell'utente (IE sempre)
Ecco il link dove ho preso la documentazione in inglese: http://homepage.ntlworld.com/bobosola/index.htm

Ciao!
Marco

I.e. 5?! uhasduhasd perchè esiste ancora? per me un utente che usa IE5 è meglio non averlo!!!!! hehehehe caspita creare un portale non è piu' come una volta. ora ne devi fare uno per ogni broswer!! :)
: Re: Utilizzare png trasparenti anche con IE
: thepisu 20 Nov 2007, 14:31:39
I.e. 5?! uhasduhasd perchè esiste ancora? per me un utente che usa IE5 è meglio non averlo!!!!! hehehehe caspita creare un portale non è piu' come una volta. ora ne devi fare uno per ogni broswer!! :)
Purtroppo hai ragione... Ci sono sempre differenze tra Firefox e IE, e a volte anche tra IE6 e IE7...