PNG Transparent no IE6 e IE5 - Solução Definitiva

[Carlos Designer 0]

PNG Transparent no Internet Explorer 6 e 5
(solução definitiva)

Bom, acho que hoje é o dia mais feliz desse ano pra mim e creio que sera para muitos de vocês também, fiquei tão feliz em encontrar isso que quis compartilhar com vocês!

Recentemente aqui na agencia, me apresentaram uns layouts bem complicados de se montar, envolvendo transparencias que só eram possiveis com PNG transparente.

Imagine ter que criar um layout onde o background é uma mistura de degrade com textura e o conteúdo possui uma dropshadow em degrade e transparente (isso mesmo a sombra é um degrade com transparencia), são varios pesadelos juntos. Ai tive que correr atrás!!

Tem a solução tradicional que muitos devem conhecer:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagem.png');

mas esta tem várias complicações de implementação.

Tinhamos a solução do iepngfix do site:

http://www.twinhelix.com/css/iepngfix/


E a solução que veio para criar um marco na história do webdesign:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif/> DD_belatedPNG (a solução definitiva)

Essa é uma biblioteca javascript desenvolvida por Drew Diller no site:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Download da biblioteca ->http://www.dillerdesign.com/experiment/DD_...edPNG_0.0.7a.js

Um pequeno script que nos da o poder de usar livremente imagens PNG tanto no IE6 como no IE5, seja a imagem simplesmente inserida no documento ou como background de um elemento.

E o melhor de tudo é que tem suporte para background-repeat e background-position.

O uso é bem simples como mostro abaixo:

basta colocar o nome do seletor css onde esta declarado o background png ou a tag img na função

<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	<!--[if lte IE 6]>
	<script type="text/javascript">
	  DD_belatedPNG.fix('#div1');
	</script>
	<![endif]-->

ou

<!--[if lte IE 6]>
 <script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	  <script type="text/javascript">
		DD_belatedPNG.fix('img');
	  </script>
	  <![endif]-->

e ainda podemos juntar tudo:

<!--[if lte IE 6]>
 <script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	<script type="text/javascript">
	  DD_belatedPNG.fix('#div1, #div2, img');
	</script>
	<![endif]-->

nota: "lte" no comentário condicional para versões menores ou iguais a versão 6 do IE

Segue abaixo o link do demo que fiz, onde coloquei uma imagem com sombra transparente como background de algumas divs e por ultimo a propria imagem no documento:

http://www.carlosroberto.hbe.com.br/im/png/testpng.html'> http://forum.imasters.com.br/public/style_emoticons/default/seta.gif/> Link DEMO

Preview no IE5:



Ainda não terminei o site que estou montando usando essa técnica, portanto não sei se tem algum bug!

Bom pessoal, fica ai mais essa dica!

Este post também está no meu blog:
http://www.crgdesign.com.br/blog/png-trans...cao-definitiva/

Abraços!

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/> http://forum.imasters.com.br/public/style_emoticons/default/grin.gif/>

editado por Carlos Designer:corrigido alguns códigos e links

[Thiago Retondar 18]

Caceta, Carlos, muito boa essa dica.

 

Uma pena que não valida.

 

Só me diz uma coisa. Não é querer sofrer demais desenvolver para Internet Explorer 5? :rolleyes:/> :rolleyes:/> :rolleyes:/> :rolleyes:/>

 

Abraços.

[Progress 2]

É realmente uma excelente dica, mas infelizmente não permite a validação do código.

 

Edit: Desconsidere o traçado.

 

[]'s

[Carlos Designer 0]

Só me diz uma coisa. Não é querer sofrer demais desenvolver para Internet Explorer 5? :rolleyes:/> :rolleyes:/> :rolleyes:/> :rolleyes:/>

nem é tão problematico assim, o unico problema que geralmente enfrento é com o bug das margens duplicadas!

 

Uma pena que não valida.

É realmente uma excelente dica, mas infelizmente não permite a validação do código.

[]'s

Desculpem se eu não percebi, mas aonde não valida ?

 

É uma solução totalmente em javascript!

 

A propria página demo que eu fiz valida tanto o css quanto o html!

[Progress 2]

Realmente valida sim, desculpe, falha minha aqui.

 

[]'s

[Thiago Retondar 18]

Realmente valida sim, desculpe, falha minha aqui.

 

[]'s

 

Faço das palavras do Progess, as minhas.

 

Abraços.

[Scaico 0]

Belo achado, Carlão!

 

Eu apliquei no site que estou desenvolvendo e queria dar uma dica para quem for usar também. Eu fazia isso na hora de usar o IEPNGFix.

 

Se você chamar o script para todas as <img> ele vai ser executado mesmo para JPGS, GIFS... E quanto mais <img>, mais vai ficar carregado.

Minha dica é criar uma classe chamada .transp e aplicar essa classe para todas as DIVS e IMGS que você quiser deixar transparente.

Com isso, você só precisa declarar:

<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
   <!--[if lte IE 6]>
   <script type="text/javascript">
	 DD_belatedPNG.fix('.transp');
   </script>
   <![endif]-->

Testado e aprovado. ;)/>

[brcontainer 16]

Incrivel achado, merece muitas palmas.

;)/>

 

Já to testando (apesar de dificilmente usar PNG).

[Ted k' 126]

é uma boa mesmo, nunca tinha pensado nisso!

[Carlos Designer 0]

Belo achado, Carlão!

 

Eu apliquei no site que estou desenvolvendo e queria dar uma dica para quem for usar também. Eu fazia isso na hora de usar o IEPNGFix.

 

Se você chamar o script para todas as <img> ele vai ser executado mesmo para JPGS, GIFS... E quanto mais <img>, mais vai ficar carregado.

Minha dica é criar uma classe chamada .transp e aplicar essa classe para todas as DIVS e IMGS que você quiser deixar transparente.

Com isso, você só precisa declarar:

<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	   <!--[if lte IE 6]>
	   <script type="text/javascript">
		 DD_belatedPNG.fix('.transp');
	   </script>
	   <![endif]-->

Testado e aprovado. ;)/>

 

Realmente é perfeito.

Eu já estou com inumeras aplicações praticas para esse script!

 

Scaico,

 

Corrigindo a mim mesmo no post inicial, o mais correto seria declarar inclusive a biblioteca dentro do comentário condicional.

 

Ficando assim por exemplo:

<!--[if lte IE 6]>
  <script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	 <script type="text/javascript">
	   DD_belatedPNG.fix('.transp');
	 </script>
	 <![endif]-->

Quanto ao problema de declarar apenas img no script e ele tentar aplicar em todos os tipos de imagem creio que não haja problema, pois de acordo com o autor do script primeiro é feita uma verificação do tipo de imagem (se realmente é png) para depois prosseguir com o script.

 

Nota do autor:

"Performance improvement: matched elements won't get "fixed" if a PNG src or background image isn't detected. This means you can be lazy."

Assim podemos tranquilamente usar:

<!--[if lte IE 6]>
  <script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	 <script type="text/javascript">
	   DD_belatedPNG.fix('img');
	 </script>
	 <![endif]-->

ou com vários id's e classes:

<!--[if lte IE 6]>
	<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	   <script type="text/javascript">
		 DD_belatedPNG.fix('img, #id1, #id2, .classe1, .classe2');
	   </script>
	   <![endif]-->

[Willian Aquino 1]

Boa tarde !!!

 

Esse tutorial era exatamente que eu precisava....

 

Mas como nada é perfeito.. deu um erro aqui...

 

Não fico transparente...

Fiz tudo certo e não funfo...

 

Esse java script não da certo com um script que tenho como menu para o meu sistema....

 

http://marcgrabanski.com/code/fisheye-menu

 

As imagens nem aparecem mais... fica só o fundo branco...

Já tentei de tudo e não concigo fazer em aparecer novamente...

 

Alguém pode me ajudar a saber o que está ocorrededo??

 

Obrigado !!!

[Scaico 0]

Interessante isso, Carlos... Ele realmente identifica quando a IMG ou o BACKGROUND é um PNG e não fica executando o script pra todos os outros jpgs do site.

 

Isso é ótimo. :D/>

[Willian Aquino 1]

Será que vcs pode me ajudar?

 

Eu consegui fazer aparecer as imagens do menu mas com o fundo...

 

Não consigo fazer funcionar...

 

Para as outras imagens que tenho no sistema funciono perfeitamente...

 

<script src="javascript/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	<!--[if lte IE 6]>
	<script type="text/javascript">
	  DD_belatedPNG.fix('#box_menu');
	</script>
	<![endif]-->

</head>
  <body> 
	<div id="tudo">
	 <div id="conteudo"> </div>
	   <ul id="box_menu">
		 <li><a href="nome.html" onclick="parent.conteudo.location='selecionar?acao=pesquisa'"><img src="Imagens/ico_lupa.png" alt="Pesquizar" /><span>Pesquizar</span> </a></li>
		 <li><a href="monitorar.html" onclick="parent.conteudo.location='monitorar'"><img src="Imagens/ico_monitor.png" alt="Monitorar" /><span>Monitorar</span></a></li>
		 <li><a href="servidores.html" onclick="parent.conteudo.location='jsp/gerenciar.jsp'"><img src="Imagens/ico_server.png" alt="Servidores" /><span>Servidores</span></a></li>
		 <li><a href="configurar.html" onclick="parent.conteudo.location='selecionar?acao=configurar'"><img src="Imagens/ico_config.png" alt="Configurar" /><span>Configurar</span></a></li>
		 <li><a href="relatorio.html" onclick="parent.conteudo.location='selecionar?acao=relatorio'"><img src="Imagens/ico_relatorio.png" alt="Relatorios" /><span>Relatório</span></a></li>
		 <li><a href="ajuda.html" onclick="parent.conteudo.location='ajuda'"><img src="Imagens/ico_ajuda.png" alt="Ajuda" /><span>Ajuda</span></a></li>
		 <li><a href="sair.html" onclick="parent.location='index.jsp'"><img src="Imagens/ico_sair.png" alt="Sair" /><span>Sair</span></a></li>
	  </ul>

[Scaico 0]

O Menu é controlado por Javascript?

Não posso garantir que é esse o problema, mas é bem possível.

 

Eu mesmo estava enfrentado um problema parecido, mas o meu foi fácil de resolver:

Eu tenho um Javascript para que o usuário possa mudar o fundo da página.

Como alguns fundos são escuros e outros são claros, eu precisava de 2 logotipos diferentes.

Então eu coloquei 2 divs diferentes, uma com o Logo Claro de BG e uma com o Logo Escuro.

Como o que mudava o fundo (e o logotipo) era um JS, esse script daqui não funcionava no logotipo e o fundo cinza continuava. Aparecendo.

 

Para resolver eu apelei para a Gambiarra:

Coloquei 2 divs com as imagens de fundo e em uma delas taquei o display:none; agora o JS não muda mais o nome da div que aparece, só muda a propriedade "display";

 

Portanto não sei como resolver o seu problema. Perdão. :(/>

[Willian Aquino 1]

Obrigado Scaico !!!!

 

Então o único geito é fazer em flash ou fazer as imagens em .gif ...

Não queria mas provavelmente será em gif mesmo, vai ficar feio mas

acho que é o único geito mesmo....

 

E o meu é controlado pelo js sim...

O site ta no poste logo a cima... não manjo mto de js não

por isso não entendo mto o que ele faz mas o básico da para entender como ele funciona...

 

Valeu !!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[Carlos Designer 0]

Olá Willian Aquino, dei uma olhada no seu códgo mas não consegui identificar seu problema.

 

Eu mesmo já desenvolvi dois sites usando essa técnica e ainda não tive nenhum problema.

[Sérgio H. Martins 0]

Ola, muito bom script, funcionou perfeitamente no ie6, valeu pela ajuda!!!

[Nícolas 4]

Muito bom, já fiz referência no final do meu post antigo.

http://forum.imasters.com.br/index.php...223512&st=0

 

Como ele já ta pendurado e tem um grande número de visualizações acredito que vai dar um pouco mais de destaque pro seu tópico.

 

Flw aeee, e vlw hein.

:)/>

[Carlos Designer 0]

Muito bom, já fiz referência no final do meu post antigo.

http://forum.imasters.com.br/index.php...223512&st=0

 

Como ele já ta pendurado e tem um grande número de visualizações acredito que vai dar um pouco mais de destaque pro seu tópico.

 

Flw aeee, e vlw hein.

:)/>

Valeu Nícolas!

[GabrielFerrari 41]

Obrigado por compartilhar a informação :)/>

Vou remover o iepngfix e começar a usar esse método agora mesmo. rs