Home Me envie um e-mail! Feed
Blog do yogodoshi

Bug do fundo transparente em imagens .png no IE 6

Galera, solução simples em Javascript para quem está tendo problemas com imagens de fundo transparente e extensão PNG no IE 6.

Basta adicionar esse código em Javascript na sua página e seus problemas serão resolvidos:

<script defer=”defer” type=”text/javascript” src=”pngfix.js”></script>

Conteúdo do pngfix.js:

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!–[if lt IE 7]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>
*/

var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}

Existem também soluções via CSS e tudo mais mas como essa solução via Javascript sempre resolveu este bug, nos meus casos, prefiro continuar com ela.

feed Gostou do Blog?  Assine o RSS Feed ou receba em seu e-mail

Posts Relacionados:
Tirinha: Conhecendo o Programador
Tutorial: Como colocar um efeito grunge em um texto apenas com CSS
Pixolu – Um ótimo buscador de imagens
Erro “object doesn’t support this property or method” ao usar getElementById no IE
dfGallery – Galeria de fotos e imagens em Flash com suporte ao Flickr, Picasa, Fotki etc

Joares diz,

September 30, 2008 @ 8:56 pm

O ruim de se fazer com JS é o lance dele poder falhar no carregamento por conta d qualidade de conexão e tbm vc corre o risco do carinha não estar com o JS habilitado… com CSS vc faz isso em duas linhas…http://www.numclique.net/como-usar-png-transparente-no-internet-explorer-6/

yogodoshi diz,

October 1, 2008 @ 4:01 pm

Cara, ter que colocar um código desses pra cada imagem PNG com fundo transparente que você tiver não é mole não…

Mas a dica é boa, apesar deu ainda preferir, no meu atual caso, usar o javascript pra isso.

Abração!

Igor diz,

October 3, 2008 @ 4:10 pm

Fala cayo

o que faz esse milagre milagre dentro do código é essa propriedade detro do style “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader” né?

eu nao entendi a real função “i=i-1″. eh pra fazer loop eterno? qual o motivo além de verificar todas a imagens?

abração!

boa sorte na noite cara! Eu tb cansei de ser cobaia! rs mas infelizmente vou tentar continuar nesse horario mesmo! só uma duvida: o preço do curso aumenta trocando de horário?

Carlos diz,

October 5, 2008 @ 7:06 pm

Comigo não funcionou!

yogodoshi diz,

October 6, 2008 @ 12:52 pm

Igor, esse bug ocorre no IE 6 porque falta nele esse filtro de opacidade, o que esse código faz é emular esse filtro quando ele vê que o navegador do usuário é o IE 6.

Carlos, que estranho, certeza que copiou o código todo e colocou dentro do < head > da página? =S

Abraços!

Carlos diz,

October 10, 2008 @ 10:36 am

Descobri porque o erro aconteceu…
eu estava usando o png transparente como background em CSS. ex: background: url(png.png);

Alguém sabe alguma solução para mim então?

yogodoshi diz,

October 10, 2008 @ 2:10 pm

@Carlos
Tem a maneira via CSS que foi dita alguns comentários acima mas acho que também não funcionará no seu caso; não tem como tirar o .png do background, colocando no próprio código não?

Abraços!

gadarf diz,

May 3, 2009 @ 5:58 pm

Uma opção a mais é sempre bom.

Lenon diz,

July 6, 2009 @ 9:33 pm

Não consegui fazer funcionar. Nota: Nunca usei Javascript… =D

Bem, eu uso o wordpress como plataforma, dai eu coquei esse código:

…no header no blog.

Dai criei um arquivo com extenção .js com o nome “pngfix” com o conteúdo que você indicou, mandei para servisor é não funcionou.

no “src=” eu tenho que especificar também o caminho do Javascript?
eu tentei isso, mas mesmo assim não deu certo.

se upder ajudar, é que não faço a mínima idéa de como usar isso mesmo, mas tentei pelo menos ^.^
até mais!

Assinar feed RSS de comentários neste post · TrackBack URI

Deixe seu comentário

Fechar
Envie por e-mail