Fix png transparente ie6
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!
Gostei muito do seu script por que ele é bem simples em relação aos outros que vejo na web, mas, tem um erro nele.
No firefox todo o primeiro elemento img fica vazio, se vc olhar no firebug verá que ele é substiruido pela imagem vazio.gif que é usada no script. Isso só acontece com o primeiro elemento img da pagina e os outro por exemplo 9 ficam ok.
No ie funciona normal.
Você pode consertar isso por favor para que seu script seja o melhor que eu já vi e usá-lo.
Obrigado pelo elogio.
Já corrigi o bug, e vc pode ver a versão corrigida no corpo deste post (http://blog.idealmind.com.br/javascript/fix-png-transparente-ie6/).
Att,
Valeu a força aí brow, script que vai pra todos os meus projetos Web!
Abração.
Eu tinha e usava o seu 1.0.0 (24/04/2010 15:12), esse aí é mais novo e melhor?
Cade o link pra download do arquivo final com seus créditos, etc pra gente poder usar?
Abração, Piero.