Download & Demo

Demo: http://blog.idealmind.com.br/exemplos/fixpng/
Download: http://blog.idealmind.com.br/exemplos/fixpng/fixpng.rar

ENGLISH

This plugin solves the problems of transparency in PNG in Internet Explorer 6.

It looks for all the images and puts them in the background with an opacity filter, replacing the original image with a transparent 1px gif.

Using

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/fixpng.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("body").fixPng();
 });
 </script>

The code to put images not changes:

<img src="img/image.png" alt="png image" />

Options

$("body").fixPng( [ string gif_file, string attr, string noreplace ] );

gif_file – If you use a file different then “img/vazio.gif”, use this option to set the correct path to a transparent gif.

attr – If you do not want to apply the filter on a specific image, use this option to set the attribute of the image that will not have the filter. The default is the attribute ‘rel’.

noreplace – The attribute value defined above. The default is ‘noreplace’.

Example

$("body").fixPng( "images/null.gif", "class", "nofixpng" );

Image that will not filter

<img src="img/imagem.png" class="test nofixpng" />

PORTUGUÊS

Este plugin resolve os problemas de transparência em PNG no Internet Explorer 6.

Ele procura por todas as imagens e as coloca em background com um filtro de opacidade, substituindo a imagem original por um gif transparente de 1px.

Como usar

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/fixpng.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("body").fixPng();
 });
 </script>

O código de iserção das imagens é normal:

<img src="img/imagem.png" alt="png image" />

Opções

$("body").fixPng( [ string gif_file, string attr, string noreplace ] );

gif_file – Se você for usar um gif diferente de “img/vazio.gif”, use esta opção para definir o caminho correto.

attr – Se você não deseja aplicar o filtro em uma determinada imagem, use esta opção para definir o atributo da imagem que não terá o filtro. O padrão é o atributo ‘rel’.

noreplace – O valor do atributo definido acima. O padrão é ‘noreplace’.

Exemplo

$("body").fixPng( "images/null.gif", "class", "nofixpng" );

Imagem que não terá o filtro

<img src="img/imagem.png" class="test nofixpng" />

Licence/Licença

This plugin is under GNU GENERAL PUBLIC LICENSE.

Olá!

Há um tempinho atrás desenvolvi uma solução em javascript para resolver problemas de transparência no ie6.

Segue abaixo a função desenvolvida por mim:

function fixPng()
{
	if( navigator.appVersion.match('MSIE 6') )
	{
		var imagem = document.getElementsByTagName("img");
		for ( var i = 0; i < imagem.length; i++)
		{
			src = imagem[i].getAttribute("src");
			if (src.indexOf(".png") != -1) {
				imagem[i].setAttribute("width", imagem[i].width);
				imagem[i].setAttribute("height", imagem[i].height);
				imagem[i].setAttribute("src", "/images/vazio.gif");
				imagem[i].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ src + "',sizingMethod='scale')";
			}
		}
	}
}

A funcionalidade é bem simples:

• A linha 2 busca todos os elementos img da página e armazena no vetor imagem
• A linha 3 vai verificar cada tag img encontrada para analisar.
• A linha 4 atribui o caminho da imagem à variável src
• A linha 5 verifica se encontra .png (teoricamente, a extensão do arquivo) no caminho do arquivo e, se encontrar, vai aplicar algumas propriedades na tag encontrada
• As linhas 6 e 7 vão setar os atributos de largura e altura para a tag img encontrada, setando de acordo com as dimensões da imagem correspondente.
• A linha 8 vai mudar o atributo src da tag para uma imagem gif (/images/vazio.gif) de 1px por 1px 100% transparente
• Por fim, a linha 9 vai atribuir um background à tag usando a imagem que antes estava no atributo src (a imagem original), usando um filtro que só o ie6 entende: progid:DXImageTransform.Microsoft.AlphaImageLoader(parâmetros).

Pronto! Todos os pngs da página vão aparecer com as suas respectivas trasparências!

A função nada mais faz que vasculhar todas as tags img que chamem pngs no atributo src (na verdade, que contenham a string “.png” no caminho), coloca uma imagem gif tranparente no lugar mantendo as proporções da imagem original, e coloca a imagem png em background aplicando nele um filtro que o carrega usando um filtro de transparência alpha, isso para cada elemento encontrado!

Para funcionar, basta chamar a função no evento onload
<body onload=”fixPng()”>

ou assim:
$(document).ready(function(){ fixPng();});

-  se você usa jQuery.

Acredito que essa solução será bem útil!

Deixe seu comentário!