egermano.com

Não sei se todos designers e/ou web masters já perceberam que as versões do Internet Explorer(IE) abaixo da 7, não dão suporte a transparência de imagens PNG.

PNG (Portable Network Graphics) é um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados.
Esse formato livre é recomendado pela W3C, suporta canal alfa, tem uma maior gama de profundidade de cores, alta compressão (regulável), além de outras interessantes características.
Além disso o formato PNG permite comprimir as imagens sem perda de qualidade e retirar o fundo de imagens com o uso do canal alfa. O canal alfa, diferentemente da transparência do GIF, é capaz de definir o nível de opacidade de cada pixel, adequando-se a qualquer fundo de um site ou apresentação, sem serrilhamento, algo que não se consegue com os outros formatos populares. Por isso é um formato válido para imagens que precisam manter 100% da qualidade para reuso. Pode ser usado na maioria dos programas de edição de imagens como o Macromedia Fireworks (proprietário) e o GIMP (livre).(Wikipedia)

Com todas essas oportunidades que o PNG te dá todo mundo vai querer usar certo?! Quase, o IE não dava suporte a transparencia, ele exibe o png como uma imagem normal, mas quando se usa transparência ele coloca uma cor cinza e quebra toda a sensação de profundidade e claro de transparência.

Pesquisando na internet encontrei alguns codigos e algumas dicas, mas nenhuma exelente, não dizendo que a minha solução é a melhor, mas na minha necessidade, essa foi a melhor solução.

Esse é o código, é necessário que se use o framework PrototypeJs, futuramente vou fazer mais duas versões, uma usando o MooTools e outra sem framework, mais pra baixo vou exclarecer a solução.

/*
Autor: Bruno Germano
Website: http://www.egermano.com
No Head do HTML coloque essa condição.



Será necessário também adicionar o framework prototypejs(download em www.prototypejs.org).
*/
var version = parseFloat(navigator.appVersion.split(“MSIE”)[1]);
var images = $$(“img”);
if ((version >= 5.5) && (document.body.filters)){
for(var i=0, size=images.length; i var img = images[i]
if (img.src.toUpperCase().include(“.PNG”)){
var newImage = document.createElement(‘span’);
newImage.id = img.id;
newImage.className = img.className;
newImage.title = img.title;
newImage.style.cssText = img.style.cssText;
newImage.style.display = “inline-block”;
newImage.style.width = img.width;
newImage.style.height = img.height;
newImage.style.float = img.align;
newImage.style.cursor = img.parentElement?img.parentElement.href ? ‘hand’: ‘arrow’: ‘arrow’;
newImage.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + img.src + “‘, sizingMethod=’scale’);”
img.outerHTML = newImage.outerHTML;
}
}
}

A solução consiste em, encontrar todas as imagens do seu documento HTML, depois disso encontrar entre elas quais são as PNG’s. Sabendo quais são elas, o codigo vai criar um elemento SPAN, aplicar as principais propriedades da imagem no elemento SPAN e aplicar a imagem como um filtro de background chamado AlphaImageLoader.

Lembrando que os filtro só ficaram disponiveis em algumas compilações do IE 5.5, logo se o brownse do cliente for inferior a esta versão ele vai enxergar a transparencia do PNG num tom de cinza.

Lembrando que esta não é a melhor solução, existem outras em JS e outras em CSS, mas no meu caso essa foi a melhor.

Obrigado,
Deus Abençoe a todos nós!

Até a próxima!