Transparência em PNGs com jQuery no IE

Posted by Vitor A. Vale on 19 de junho de 2010 Leave a comment (1) Go to comments

Uma das grandes irritações com as versões antigas do Internet Explorer é a utilização de imagens no formato PNG com fundo transparente. Existem hoje diversas formas (Hacks) para fazer a exibição correta da transparência para o Internet Explorar, hoje vou demonstrar uma delas utilizando o Framework jQuery (outras informações aqui) e o plugin jQuery.pngFix.

Este script funciona com as versões 5.5 e 6 do IE de forma não obstrutiva e trabalha diretamente nas imagens linkadas, aplicadas ao background (CSS) mantendo todos os atributos e propriedades das imagens.

Como usar o jQuery.pngFix

1. Faça download do jQuery e do plugin jQuery.pngFix

2. Adicione o jQuery e o pngFix no cabeçalho de seu site (entre as tags <head>..</head>)

<head>
...
<script type="text/javascript" src="jquery.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
...
</head>

3. Adicione após a chamada dos scripts a ativação do plugin

<head>
...
<script type=”text/javascript”>
 jQuery(document).ready(function($){
     $(document).pngFix();
 });
</script>
...
</head>

Obs.: Desta forma fizemos com que o pngFix seja executado em todos os elementos do site, para aplicar a uma área especifica altere o $(document) pelo área onde será aplicado $(“#elementoXYZ”)