Dica para quem trabalha com sites

E ai pessoal! Bom eu tive um problema no meu site, que só fui constatar a pouco tempo. Eu contrui ele usando somente arquivos png, pela possibilidade de usar um canal alpha suavisado, diferente do gif que gera um alpha todo cerrilhado. A questão é que somente o internet explorer 7 lê esse canal alpha as versões anteriores não entendem. Navegadores como o mozila, fire fox... já lêem esse formato a muito tempo. Eu até achei estranho quando algumas pessoas me falaram que o site estava "branco" e difícil de ler... e ai eu não entendia, pô, branco??? mas o fundo é todo em azul... Só fui descobrir o que era quando abri ele em um IE mais antigo. :S Bom vou deixar aqui a dica de como resolver esse problema: A solução é muito simples, tem que se utilizar um javascript para fazer com que as versões antigas do IE leiam o canal alpha do png, e esse java não vai interferir em outros navegadores que já entendem o formato. Na página html deve ser colado esse código dentro das tags head: <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> Esse código vai fazer com que a página carregue informações de um arquivo externo chamado pngfix.js . Portanto agora tem que se criar esse arquivo javascript, use o bloco de notas, depois é só trocar a extenção do arquivo de txt pra js. Ou baixe o arquivo AQUI 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 = "" img.outerHTML = strNewHTML i = i-1 } } } Obs.: Todas as páginas que tiverem arquivos png tem que ter o código de carregamento dentro das tags head. Para mais informações: http://homepage.ntlworld.com/bobosola Para quem não conhece todas as vantagens do formato png> http://pt.wikipedia.org/wiki/PNG Site com erro: Site corrigido:

Embora eu não goste de trabalhar com png em projetos de sites que eu faço, é uma dica interessante, não imaginava que dava esse tipo de problema... também vou deixar salvo aqui pois pode ser que alguma hora eu tenha que usar png mesmo. Excelente contribuição... parabéns!!!

Site sendo reformulado!!!

Um detalhe... esse js não funciona se vc for tentar mapear o png para definiar áreas da imagem como link. Ou o link não vai aparecer, ou o alpha vai dançar. :? Odeio programação, hehehehe.

q interessante, num sabia disso não eu vou fazer um teste...vou colocar o png dentro de um swf e publicar o swf com wmode=transparente vamos ver se engamos esses browser frescos...hehehe eu sou como vc tiago....i hate progamação inté

www.marcospaulo.com

Comigo não funcionou...:( Achei muito interreçante isso, ja tive muitos problemas por causa disso...gosteria muito de saber oque aconteceu. :S

Acho que descobri meu problema, tem que imforma na tag da imagem isso num é? > onload="fixPNG(this)" O problema é que eu fasso sites com tabless e importo as imagens todas via CSS, gostaria de saber como resolver isso.

Valeu tiagodmed, muito legal a dica. Eu sei de uma pra quem quiser usar png sem usar javascript mas so funciona prad quando o png está no background. Pode fazer direto no css assim: #Layer2 { position:absolute; width:796px; height:456px; z-index:2; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='quadro.png'); } /*IE ignores styles with [attributes], so it will skip the following.*/ #Layer2[class] { position:absolute; width:756px; height:381px; z-index:2; background-image:url(quadro.png); background-repeat:no-repeat; } e no html fica assim: <div id="Layer2" class="Layer2"></div> espero ter ajudado mais um pouco. abraços

Existe tb essa forma de fazer só css: img { behavior: url("pngbehavior.htc"); } ainda estou estudando esse pngbehavior.htc, as vezes ele nao funciona, quem quiser testar e ajudar ai vai o codigo do pngbehavior.htc, da um ctrl+c e ctrl+v e salva na mesma pasta do css. pngbehavior.htc [code:1:49f154b491]<public:component lightWeight="true"> <public:attach event="onpropertychange" onevent="propertyChanged()" /> <public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/> <public:attach event="onafterprint" onevent="afterPrint()" for="window"/> <script> /* * PNG Behavior * * This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik) * for WebFX (http://webfx.eae.net) * Copyright 2002-2004 * * For usage see license at http://webfx.eae.net/license.html * * Version: 1.02 * Created: 2001-??-?? First working version * Updated: 2002-03-28 Fixed issue when starting with a non png image and * switching between non png images * 2003-01-06 Fixed RegExp to correctly work with IE 5.0x * 2004-05-09 When printing revert to original * */ var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) && navigator.platform == "Win32"; var realSrc; var blankSrc = "blank.gif"; var isPrinting = false; if (supported) fixImage(); function propertyChanged() { if (!supported || isPrinting) return; var pName = event.propertyName; if (pName != "src") return; // if not set to blank if (!new RegExp(blankSrc).test(src)) fixImage(); }; function fixImage() { // get src var src = element.src; // check for real change if (src == realSrc && /\.png$/i.test(src)) { element.src = blankSrc; return; } if ( ! new RegExp(blankSrc).test(src)) { // backup old src realSrc = src; } // test for png if (/\.png$/i.test(realSrc)) { // set blank image element.src = blankSrc; // set filter element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." + "AlphaImageLoader(src='" + src + "',sizingMethod='scale')"; } else { // remove filter element.runtimeStyle.filter = ""; } } function beforePrint() { isPrinting = true; element.src = realSrc; element.runtimeStyle.filter = ""; realSrc = null; } function afterPrint() { isPrinting = false; fixImage(); } </script> </public:component> [/code:1:49f154b491]

Opa felipesizilio, muito obrigado. Vou testar esse metodo concertesa ;)