Back to top

Autore Topic: Utilizzare png trasparenti anche con IE  (Letto 19414 volte)

Offline joomlapixel

  • Abituale
  • ****
  • Post: 1555
    • Mostra profilo
Utilizzare png trasparenti anche con IE
« il: 15 Gen 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/

Offline rider111

  • Esploratore
  • **
  • Post: 59
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #1 il: 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.

Offline joomlapixel

  • Abituale
  • ****
  • Post: 1555
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #2 il: 22 Feb 2007, 07:43:59 »
Grazie per la segnalazione

Offline vinfel

  • Esploratore
  • **
  • Post: 106
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #3 il: 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

Offline netbog

  • Nuovo arrivato
  • *
  • Post: 2
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #4 il: 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

Offline joomlapixel

  • Abituale
  • ****
  • Post: 1555
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #5 il: 11 Apr 2007, 18:14:05 »
Ottimo
grazie

Offline TheShark

  • Team Joomla.it
  • Abituale
  • *******
  • Post: 920
  • Sesso: Maschio
    • Mostra profilo

Offline simoegio

  • Appassionato
  • ***
  • Post: 306
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #7 il: 01 Giu 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

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ì??

Offline thepisu

  • Appassionato
  • ***
  • Post: 369
  • Sesso: Maschio
  • .. still looking for ..
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #8 il: 07 Giu 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...

Codice: [Seleziona]
<!--[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]
Stefano "Pisu" Bagnatica | VirtueMart Italia

Offline milkplus

  • Appassionato
  • ***
  • Post: 357
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #9 il: 08 Giu 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?

Offline thepisu

  • Appassionato
  • ***
  • Post: 369
  • Sesso: Maschio
  • .. still looking for ..
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #10 il: 08 Giu 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..
Stefano "Pisu" Bagnatica | VirtueMart Italia

Offline milkplus

  • Appassionato
  • ***
  • Post: 357
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #11 il: 08 Giu 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!

Offline evildark

  • Nuovo arrivato
  • *
  • Post: 36
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #12 il: 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!! :)

Offline thepisu

  • Appassionato
  • ***
  • Post: 369
  • Sesso: Maschio
  • .. still looking for ..
    • Mostra profilo
Re: Utilizzare png trasparenti anche con IE
« Risposta #13 il: 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...
Stefano "Pisu" Bagnatica | VirtueMart Italia

 



Web Design Bolzano Kreatif