Publicidade (Anuncie Aqui)

Exibindo PNGs transparentes no IE5 – IE PNG Fix

Exibindo PNGs transparentes no IE5 – IE PNG Fix

publicado em 29 de maio de 2009 com View Comments

Muita gente que tá começando agora têm problemas quando usa imagens (com transparência e PNGs semi-transparentes) no Internet Explorer 5 e posteriores (até o 6).

Sei que parece loucura (pra alguns) se preocupar com o IE5 e 6, mas infelizmente esses navegadores ainda representam de 20% a 30% do mercado mundial atual, no Brasil então ele é muito mais comum.

Foi por causa disso que inventaram um tal de “PNG Fix”, que é um arquivinho que você inclui no seu site e o IE5+ passa a “ler” os PNGs transparentes e semi-transparentes como se fosse um IE7. Para usar esse recurso é só seguir o passo-a-passo a seguir:

1 – Acesse o site do IE PNG Fix e faça o download do zip contendo os arquivos que serão usados.

2 – Coloque os arquivos iepngfix.htc e blank.gif na pasta do seu site.

3 – Insira o seguinte código HTML dentro do <head> do seu site:

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

Vale lembrar que se você usar PNGs transparentes como fundo de outros elementos, você também precisa incluí-los na lista (img, div, input e etc.).

4 – Divirta-se.

Se você colocou os arquivos (.htc e .gif) em outras pastas você precisa alterar os caminhos corretamente, tanto no bloco de CSS (que vai dentro deo HTML, do passo 3) quanto dentro do HTC, que diz onde fica a imagem blank.gif.

Veja agora algumas vantagens do script listadas no site do script:

  • Ativação automática de transparência para os PNGs das página.
  • Suporta para os elementos <img src=”" />.
  • Suporta PNGs usados como fundo (background)
  • Suporta mudanças dinâmicas do SRC de uma imagem bem como mudanças de IDs e classes
  • Script muito pequeno (carregamento rápido)

Você também vai gostar de ler:

Postado em HTML, Tutoriais

Com as tags , , , , , , , , , , , , , , ,

Escrito por Thiago Belem

Gostou desse artigo?

Não se esqueça de assinar o RSS e divulgue-o para o mundo:

  • Só para reforçar meu querido que existem alguns bugs que vem com essa solução (e com todas as outras de pngfix) que é voltado ao background. Para se fazer o fundo aparecer, algumas funcionalidades de background simplesmente bugam e não funcionam ou não como esperado como background-position principalmente. Tem que haver cautela em qq uma dessas soluções.
  • Thiago,
    infelizmente não consiguo integrar

    .htc e .gif na raíz do site, "img, div, a{ behavior: url(iepngfix.htc); }" inserido no arquivo .css.

    Se pouder ajudar, agradeço.
  • Márcio Vinicius Silva
    Pô cara, procurei no Google sobre dicas de como deixar PNG funcional em IE 5 e 6, e o seu tutorial foi o melhor e mais facil de realizar. Valeeeeu. Me ajudo muito! Agora não tenho mais problemas. E uma pergunta. NO IE7 ainda ocorrem esses erros?
  • @Márcio Vinicius
    Obrigado pelo elogio! :)
    No IE 7 o PNG aparece normal mesmo... só no IE6 que dá essa zica.
  • Muito bom esse artigo, cara demorou do IE 5 parar de ser usado, ele é um tormento quando vai desenvolver ou editar css.
    esse codigo acabou com meu pesadelo do IE 5.
    Tem um artigo similar, falando do IE6 no link:
    http://www.tableless.com.br/a-internet-tem-que-...
  • Thiago
    Gostei muito da dica cara, vou utilizar muito no futuro...
    Ainda mais por ser questão de uma atividade tão simples de se fazer.
  • @Thiago Belem

    Tudo blz cara!

    É cara, realmente me expressei mal, olhei o fonte do IE PNG fix e não um framework na real. Em relação ao JQuery pngFIX tive um problema recentemente com um background em png e outra imagem png por cima dele.
    Vou ver se nesse fds resolvo isso. Se tive alguma solução agradeço!

    Abs,

    :)
  • Realmente não dá para se limitar de usar PNG por causado do IE6, com certeza utilizar um framework desses da vida é mto bom! Mas no caso de utilizar este método sugerido tem uma pequena complicação porque você tem que declarar qual tag irá receber o pngFIX. Já com JQuery é só fazer a declaração do mesmo:


    $(document).ready(function(){
    $(document).pngFix();
    });


    Para maiores informações:
    http://jquery.andreaseberhard.de/pngFix/

    Até mesmo pelo fato de que quando você utiliza JQuery para todos os comportamentos Cliente Side fica estranho utilizar outro framework.
    :)

    Abs,

    Alexandrino S. Souza
    Desenvolvedor Web
  • @Alexandrino
    Fala Alex... Tudo na paz?

    Obrigado pelo comentário e pelas observações... Já usei muito o pngFix do jQuery, mas tem três pontos que eu preciso falar sobre o seu comentário... 1° que o pngFix jQuery (Plugin) não funciona para imagens de fundo que usam repeat...

    O 2° ponto é que o IE PNG Fix está longe de ser um framework, ele é apenas uma lib.

    E por fim, mas não menos importante, o IE PNG Fix também pode ser direcionado a todos os elementos (assim como o $(document) do jQuery), seria só usar o elemento global * { ... } no CSS, mas assim como no jQuery, isso deixaria a "conversão" mais lenta.

    Abraços e obrigado pelo comentário :]
blog comments powered by Disqus