Pular para o conteúdo principal

Utilizando png transparente no IE

Utilizar imagens transparentes no formato png no internet explorer é um grande problema. Suas versões antigas não dão suporte ao canal Alpha, utilizado pelo png para criar a transparência. Para nossa sorte, existem desenvolvedores que se dispõem a criar alternativas que contornem essas falhas.


É o caso do Drew Diller, desenvolvedor, que criou a excelente biblioteca chamada DD_belatedPNG.

O DD_belatedPNG é uma pequena biblioteca Java script que após inserida em seu documento, promete habilitar o canal alpha e resolver os problemas de compatibilidade com o formato png no Internet explorer.

Modo de uso

Baixe o script e hospede em seu servidor. Após hospedar o arquivo, adicione as seguintes linhas de códigos em seu documento.


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Os locais em vermelho devem ser modificados de acordo com seu documento. O primeiro é o caminho do script hospedado por você, e o segundo é o elemento, classe ou id que irá receber o arquivo png.

Exemplo


Digamos que você vai usar um png transparente no topo do meu blog. Simples, adicione a id do topo. Caso seja #topo, substitua como mostro abaixo:


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('#topo');
</script>
<![endif]-->


Caso queira declarar vários elementos, é só separá-los por virgula.


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg, #topo, h1, div');
</script>
<![endif]-->

Agora você pode usar imagens em png sem esquentar a cabeça.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Criando um layout simples com HTML e CSS

Deixe a barra de tarefas do windows 7 igual a do xp

Elegante menu azul no photoshop