31.08.2009

PNG no IE 6 com jQuery

Um plugin muito útil para acabar com o problema de PNG no IE 6 é o ifixpng.

Vamos ao passo a passo para a instalação desse plugin:

1° Faça o download da biblioteca jQuery e também do plugin ifixpng.

2° Salve a imagem pixel.gif (abra o link, e clique com o botão direito em “salvar como”). Bote a imagem no diretório images/pixel.gif ou então para salva-lá em outro diretório use o código:

$.ifixpng('media/pixel.gif');

//por exemplo
$.ifixpng('../img/pixel.gif');

3° Veja os exemplos de códigos abaixo e adicione em uma tag <script></script> ou então crie um novo arquivo .js

// aplica a todas as imagens
$('img').ifixpng();

// aplica a todas as tags div
$('div').ifixpng();

// aplica e remove o plugin
$('img').ifixpng();
$('img').iunfixpng();

// aplica a diversas tags diferentes
$('img], div#logo, a, span').ifixpng();

Abra o DEMO no IE 6 e veja o script funcionando:
Demo

Em caso de dúvida copie todo o código-fonte do DEMO para sua máquina e faça testes.

BUG que ocorre

Um BUG que pode ocorre no IE 6, é o texto e os links dentro da tag que recebe esse Hack não ficarem mais selecionáveis. Uma solução é adicionar a propriedade position:relative na tag. Caso continue bugado, tente aplicar a propriedade position:relative as tags filhas da tag que recebeu o efeito do script.

Observações Finais

Apesar de que para mim é melhor usar esse script do que um Hack CSS para PNG. Ele tem o mesmo problema que o Hack em CSS, não aceita background-position e nem background-repeat.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *