PNG transparente no Wordpress

634 views

Skip to first unread message

Agni - Eduardo Santos

unread,

Mar 9, 2009, 9:28:44 PM3/9/09

to wordpres...@googlegroups.com

Olá galera...
To customizando um site no Wordpress (não tenho larga experiência nisso, mas to me virando com CSS), só que to usando um layout que me passaram, onde se usa PNG com transparencia Alpha. O IE7, FF e Opera ta tudo bem, mas o IE6 não suporta essa transparencia. Existem diversos Scripts na Web para fazer com que ele consiga exibir os PNG Transparentes corretamente, e eu adicionei um script com essa finalidade no meu site (no arquivo header.php do meu template). Eu já havia usado esse script e tinha dado certo, mas no Wordpress não ta funcionando, os PNG nao ficam transparentes no IE continuam com aquela cor cinza! Testei uns três scripts diferentes, e nao deu certo.

Alguém sabe alguma solução para isso?

O link do que eu estou fazendo é http://www.toucheeventos.com/site (ainda ta longe da versão final...rs)

[]s

Eduardo Santos

Walter "wmoriah" Araujo dos Santos

unread,

Mar 9, 2009, 9:33:19 PM3/9/09

to wordpres...@googlegroups.com

qual a solucao q vc esta mais acostumado a usar?
passa o link pra darmos uma verificada com essa solucao implementada.

--
Walter Araújo dos Santos "wmoriah"
---------------------------------------------------------------------------
Desenvolvedor WEB | Webstandard/ PHP/ MySQL/ Wordpress
Consultor | Search Engine Optimization/ Search Engine Marketing
Gerente de Internet | Chargespb.com.br
---------------------------------------------------------------------------
http://wmoriah.com.br
http://meadiciona.com/wmoriah
http://host.wmoriah.com.br
http://chargespb.com.br
---------------------------------------------------------------------------
83 8828-9497 - Oi
83 9134-9278 - Claro
---------------------------------------------------------------------------
Antes de imprimir pense em seu
compromisso com o Meio Ambiente
e o comprometimento com os Custos.
Use como Rascunho o outro lado da
Folha. A Natureza agradece!!!
Use papel reciclado.
---------------------------------------------------------------------------
Atenção: Se você pretende redirecionar este e-mail,
por favor, apague todos os endereços que aparecem
nele. Outra dica de segurança é endereçá-lo no Cco
ou Cc. Desta forma você estará protegendo a mim,
seus amigos e a você mesmo. Eu e a Campanha
Contra o SPAM agradecemos sinceramente.'

2009/3/9 Agni - Eduardo Santos <certas...@gmail.com>

Agni - Eduardo Santos

unread,

Mar 9, 2009, 11:23:24 PM3/9/09

to wordpres...@googlegroups.com

O script que eu costumo usar é o que segue abaixo. Eu adicionei ele entre as tags <head></head> (no arquivo "header.php" do meu template):

<script language="javascript" type="text/javascript">
		// Correctly handle PNG transparency in Win IE 5.5 or higher.
		// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

		function correctPNG()
		   {
		   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
			 }
		      }
		   }
		window.attachEvent("onload", correctPNG);
	</script>

Já usei ele outras vezes e funcionou normalmente, mas no Wordpress não ta funcionando.
Agradeço a ajuda... []s

Eduardo Santos

Walter "wmoriah" Araujo dos Santos escreveu:

Walter "wmoriah" Araujo dos Santos

unread,

Mar 10, 2009, 6:02:41 AM3/10/09

to wordpres...@googlegroups.com

experimente colocalo por ultimo de todas as linhas dentro do <head>

tipo...

<head>
..
..
..
..
..
..
o script
</head>

pq tem plugins que instalam varios js no header e o seu deve ser o ultimo pq pode dar conflito.

[]s

2009/3/10 Agni - Eduardo Santos <certas...@gmail.com>

Agni - Eduardo Santos

unread,

Mar 10, 2009, 8:54:40 PM3/10/09

to wordpres...@googlegroups.com

Já estava dessa forma, mas mesmo assim não ta rolando.
O unico plugin que to usando é o "Featured Content Gallery", para criar o slideshow de noticias.

Não sei o que faço mais...

Valew pela ajuda... []s

Gustavo Allebrandt

unread,

Mar 11, 2009, 12:53:46 PM3/11/09

to wordpres...@googlegroups.com

Cara, já tive esse problema em um projeto que fiz na empresa que trabalho, as imagens que estavam no html antes de ser colocado no template do wordpress ficavam transparentes numa boa no IE6, mas depois que coloquei no template as imagens não ficavam mais transparêntes, dai depois de um bom tempo descobri que era problema de permissão de usuário da máquina que usava, tenta ver em outros computadores pra ver se o problema continua.

Thiago Moskito Antonucci

unread,

Mar 11, 2009, 2:05:16 PM3/11/09

to wordpres...@googlegroups.com

Vou te dar 2 soluções eficazes + uma dica, ok?
Vamos lá!

Para deixar qualquer PNG transparente no teu site, basta um CSS, desde que a imagem (png) não seja um backgroud - vou falar do background depois.

Use o seguinte CSS:

* html img/**/ {

filter:expression(
   this.alphaxLoaded ? "" :
   (
    this.src.substr(this.src.length-4)==".png"
    ?
    (
     (!this.complete)
     ? "" :
      this.runtimeStyle.filter=

      ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
      (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+

      String(this.alphaxLoaded=true).substr(0,0)+
      (this.src="blank.gif").substr(0,0)
    )
    :
    this.runtimeStyle.filter=""
   )
  );

}

Veja bem, taí o pulo do gato. Você colocar a imagem blank.gif junto das demais do template ou coloca o endereço absoluto "http://www.seusite.com.br/imagens/blank.gif"

BLANK.GIF, o que é?

Nada mais é que uma imagem de 1px por 1px, transparente, que o CSS vai substituir pela transparência do PNG, aí vai funcionar nos outros navegadores. (anexo)
Com esse código CSS, qualquer PNG no seu site vai ficar transparente! Menos os backgrouns, que vou falar disso agora.

E os backgrouds em PNG?

Esse é mais complicado, mas funciona. Para cada iamgem - ou DIV - que tenha PNG transparente, você vai precisar criar um css. Vamos ao código.

.fundojanelaprincipal{

//filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/jan-prin.png');

padding-left:4px;
padding-right:4px;
padding-bottom:4px;

}
*/
/* IE ignores styles with [attributes], so it will skip the following. 

.fundojanelaprincipal[class]{

background: url(img/jan-prin.png) repeat-y;

}

Agora você atribui essa classe para a DIV - ou outra tag global - e pronto. Como eu disse, dá trabalho por que é um estilo - classe - para cada imagem de background.

Dicas

Para fazer uma imagem chapada - ou não - ficar transparente, ou melhor, translucida use o seguinte código CSS:

 {	opacity: 0.6;filter:alpha(opacity=60);zoom:1; border:0px; }

Você pode atribuir isso a classes, divs e tal.
MEGA IMPORTANTE: Esses valores são hereditários, ou seja, se você atribui isso numa div, qualquer outra coisa que esteja dentro dela vai ficar transparente também, digamos:

<div class="transparencia">
      <div>
            <p>texto de teste</p>
            <img src="end.jpg" alt="teste">
      </div>
</div>

Nesse código acima, digamos que a classe "transparencia" está com as atribuições acima, como são propriedades hereditárias, o texto e a imagem vão ficar transparentes também.
Funciona em - quase - todos os navegadores.

E finalmente. Um exemplo que você pode testar de cara. Coloque o código abaixo no seu CSS e todas as imagens (não-background) com links (<a href="#"><img/ ></a>) ficarão translúcidas assim que focalizadas com o mouse. Faça o teste!

a:hover img  {opacity: 0.6;filter:alpha(opacity=60);zoom:1; border:0px;}

Abraços.

Aproveitando. Alguém sabe como resolver a incompatibilidade do podpress 8.8 com a última versão do wordpress? Obrigado.

2009/3/11 Gustavo Allebrandt <gustavoa...@gmail.com>

--
Thiago Moskito
(61) 8548-4279 / 3041-7718
´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`´¨`
TudoPodre
http://www.tudopodre.com.br

Contato:
http://meadiciona.com/thiagomoskito <-- tem tudo aí!

Agni - Eduardo Santos

unread,

Mar 12, 2009, 1:07:25 AM3/12/09

to wordpres...@googlegroups.com

Valeu pelas informações Thiago...
A dica que deu eu já conhecia... mas acho que meu problema era o uso de PNG transparentes em background. Ainda nao testei, mas depois digo o resultado.

Valew a força...

Valew sua dica tbm Gustavo...

Eduardo Santos

Thiago Moskito Antonucci escreveu:

Elias de A. Rodrigues

unread,

Mar 12, 2009, 11:13:20 AM3/12/09

to WordPress Brasil Lista

Pessoal,

Eu uso esse plugin da jQuery, que é bem simples de usar e funciona
muito bem tanto para imagens normais com tag <IMG> quanto para
backgrounds.

http://jquery.andreaseberhard.de/pngFix/

Acho que deve ser útil para vocês.

Att.

Elias de A. Rodrigues
WebDeveloper
el...@binaryweb.com.br
http://www.meadiciona.com.br/eliasbh
+55(31)8877-2910

On 12 mar, 02:07, Agni - Eduardo Santos <certascoi...@gmail.com>
wrote:

> Valeu pelas informações Thiago...
> A dica que deu eu já conhecia... mas acho que meu problema era o uso de
> PNG transparentes em background. Ainda nao testei, mas depois digo o
> resultado.
>
> Valew a força...
>
> Valew sua dica tbm Gustavo...
>

> *Eduardo Santos*

>
> Thiago Moskito Antonucci escreveu:
>
> > Vou te dar 2 soluções eficazes + uma dica, ok?
> > Vamos lá!
>
> > Para deixar qualquer PNG transparente no teu site, basta um CSS, desde
> > que a imagem (png) não seja um backgroud - vou falar do background
> > depois.
>
> > Use o seguinte CSS:
>
> > * html img/**/ {
>
> > filter:expression(
> > this.alphaxLoaded ? "" :
> > (
> > this.src.substr(this.src.length-4)==".png"
> > ?
> > (
> > (!this.complete)
> > ? "" :
> > this.runtimeStyle.filter=
>
> > ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
> > (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'"). substr(0,0)+
>
> > String(this.alphaxLoaded=true).substr(0,0)+

> > (this.src="*blank.gif*").substr(0,0)

> > )
> > :
> > this.runtimeStyle.filter=""
> > )
> > );
>
> > }
>
> > Veja bem, taí o pulo do gato. Você colocar a imagem blank.gif junto
> > das demais do template ou coloca o endereço absoluto
> > "http://www.seusite.com.br/imagens/blank.gif"
>

> > *BLANK.GIF, o que é?*

>
> > Nada mais é que uma imagem de 1px por 1px, transparente, que o CSS vai
> > substituir pela transparência do PNG, aí vai funcionar nos outros
> > navegadores. (anexo)
> > Com esse código CSS, qualquer PNG no seu site vai ficar transparente!
> > Menos os backgrouns, que vou falar disso agora.
>

> > *
> > E os backgrouds em PNG?*

>
> > Esse é mais complicado, mas funciona. Para cada iamgem - ou DIV - que
> > tenha PNG transparente, você vai precisar criar um css. Vamos ao código.
>
> > .fundojanelaprincipal{
>

> > //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='*img/jan-prin.png*');

>
> > padding-left:4px;
> > padding-right:4px;
> > padding-bottom:4px;
>
> > }
> > */
> > /* IE ignores styles with [attributes], so it will skip the following.
>
> > .fundojanelaprincipal[class]{
>

> > background: url(*img/jan-prin.png*) repeat-y;

>
> > }
>
> > Agora você atribui essa classe para a DIV - ou outra tag global - e
> > pronto. Como eu disse, dá trabalho por que é um estilo - classe - para
> > cada imagem de background.
>

> > *Dicas*

>
> > Para fazer uma imagem chapada - ou não - ficar transparente, ou
> > melhor, translucida use o seguinte código CSS:
>
> > { opacity: 0.6;filter:alpha(opacity=60);zoom:1; border:0px; }
>
> > Você pode atribuir isso a classes, divs e tal.

> > *MEGA IMPORTANTE*: *Esses valores são hereditários, ou seja, se você

> > atribui isso numa div, qualquer outra coisa que esteja dentro dela vai

> > ficar transparente também, digamos:*

>
> > <div class="transparencia">
> > <div>
> > <p>texto de teste</p>
> > <img src="end.jpg" alt="teste">
> > </div>
> > </div>
>
> > Nesse código acima, digamos que a classe "transparencia" está com as
> > atribuições acima, como são propriedades hereditárias, o texto e a
> > imagem vão ficar transparentes também.
> > Funciona em - quase - todos os navegadores.
>
> > E finalmente. Um exemplo que você pode testar de cara. Coloque o
> > código abaixo no seu CSS e todas as imagens (não-background) com links
> > (<a href="#"><img/ ></a>) ficarão translúcidas assim que focalizadas
> > com o mouse. Faça o teste!
>
> > a:hover img {opacity: 0.6;filter:alpha(opacity=60);zoom:1; border:0px;}
>
> > Abraços.
>

> > *Aproveitando. Alguém sabe como resolver a incompatibilidade do
> > podpress 8.8 com a última versão do wordpress? Obrigado.*
>
> > 2009/3/11 Gustavo Allebrandt <gustavoallebra...@gmail.com
> > <mailto:gustavoallebra...@gmail.com>>

>
> > Cara, já tive esse problema em um projeto que fiz na empresa que
> > trabalho, as imagens que estavam no html antes de ser colocado no
> > template do wordpress ficavam transparentes numa boa no IE6, mas
> > depois que coloquei no template as imagens não ficavam mais
> > transparêntes, dai depois de um bom tempo descobri que era
> > problema de permissão de usuário da máquina que usava, tenta ver
> > em outros computadores pra ver se o problema continua.
>

> > 2009/3/10 Agni - Eduardo Santos <certascoi...@gmail.com
> > <mailto:certascoi...@gmail.com>>

>
> > Já estava dessa forma, mas mesmo assim não ta rolando.
> > O unico plugin que to usando é o "Featured Content Gallery",
> > para criar o slideshow de noticias.
>
> > Não sei o que faço mais...
>
> > Valew pela ajuda... []s
>

> > *Eduardo Santos
>
> > *

> > Walter "wmoriah" Araujo dos Santos escreveu:
> >> experimente colocalo por ultimo de todas as linhas dentro do
> >> <head>
>
> >> tipo...
>
> >> <head>
> >> ..
> >> ..
> >> ..
> >> ..
> >> ..
> >> ..
> >> o script
> >> </head>
>
> >> pq tem plugins que instalam varios js no header e o seu deve
> >> ser o ultimo pq pode dar conflito.
>
> >> []s
>
> >> --
> >> Walter Araújo dos Santos "wmoriah"
> >> ---------------------------------------------------------------------------
> >> Desenvolvedor WEB | Webstandard/ PHP/ MySQL/ Wordpress
> >> Consultor | Search Engine Optimization/ Search Engine Marketing

> >> Gerente de Internet | Chargespb.com.br <http://Chargespb.com.br>

> >> ---------------------------------------------------------------------------
> >> http://wmoriah.com.br
> >> http://meadiciona.com/wmoriah
> >> http://host.wmoriah.com.br
> >> http://chargespb.com.br
> >> ---------------------------------------------------------------------------
> >> 83 8828-9497 - Oi
> >> 83 9134-9278 - Claro
> >> ---------------------------------------------------------------------------
> >> Antes de imprimir pense em seu
> >> compromisso com o Meio Ambiente
> >> e o comprometimento com os Custos.
> >> Use como Rascunho o outro lado da
> >> Folha. A Natureza agradece!!!
> >> Use papel reciclado.
> >> ---------------------------------------------------------------------------
> >> Atenção: Se você pretende redirecionar este e-mail,
> >> por favor, apague todos os endereços que aparecem
> >> nele. Outra dica de segurança é endereçá-lo no Cco
> >> ou Cc. Desta forma você estará protegendo a mim,
> >> seus amigos e a você mesmo. Eu e a Campanha
> >> Contra o SPAM agradecemos sinceramente.'
>

> >> 2009/3/10 Agni - Eduardo Santos <certascoi...@gmail.com
> >> <mailto:certascoi...@gmail.com>>

>
> >> O script que eu costumo usar é o que segue abaixo. Eu
> >> adicionei ele entre as tags <head></head> (no arquivo
> >> "header.php" do meu template):
>
> >> <script language="javascript" type="text/javascript">
> >> // Correctly handle PNG transparency in Win IE 5.5 or higher.

> >> //http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

>
> >> function correctPNG()
> >> {
> >> 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 <http://img.id>) ? "id='" + img.id <http://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
> >> }
> >> }
> >> }
> >> window.attachEvent("onload", correctPNG);
> >> </script>
>
> >> Já usei ele outras vezes e funcionou normalmente, mas no
> >> Wordpress não ta funcionando.
> >> Agradeço a ajuda... []s
>

> >> *Eduardo Santos*

>
> >> Walter "wmoriah" Araujo dos Santos escreveu:
> >>> qual a solucao q vc esta mais acostumado a usar?
> >>> passa o link pra darmos uma verificada com essa solucao
> >>> implementada.
>
> >>> --
> >>> Walter Araújo dos Santos "wmoriah"
> >>> ---------------------------------------------------------------------------
> >>> Desenvolvedor WEB | Webstandard/ PHP/ MySQL/ Wordpress
> >>> Consultor | Search Engine Optimization/ Search Engine
> >>> Marketing
> >>> Gerente de Internet | Chargespb.com.br