Jump to content


Photo

Transparencia Png No Ie


  • Faça o login para participar
11 replies to this topic

#1 Lility

Lility

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 27/07/2008, 19:05

Oi pessoal
Estou com uma duvida. Nos meus sites utilizo muito transparencia png, porem alguns browsers nao aceitam, como o ie 5 e 6, e temos q trabalhar com a possibilidade de muitos clientes ainda usarem essas versão.
Consegui descobrir como fazer para arrumar em imagem, com javascript, porem qdo se trata de background nao funciona.
Alguem sabe alguma solução pra me ajudar.
Agradeço

#2 Fabio_RJ

Fabio_RJ

    PHP Conspiracy

  • Usuários
  • 206 posts
  • Sexo:Masculino
  • Localidade:Rio de Janeiro

Posted 27/07/2008, 19:52

Boa Noite Lility,

Veja se isso lhe ajuda: http://www.twinhelix.com/css/iepngfix/
---
TeraDesign.com.br => [Hospedagem, Registro de Dominios, Desenvolvimento de websites e etc...]

#3 Lility

Lility

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 28/07/2008, 08:05

Oi Fábio...
Eu fiz o q dizia no forum, mas acho q nao entendi muito bem, ou nao funcionou para backgroud. Poderias me explicar melhor?
Obrigada


Consegui...
É muito facil, com backgroud é só usar css...
Se alguem tiver interesse posto o codigo aqui.
Obrigada a todos....

#4 PenDragon

PenDragon

    Super Veterano

  • Ex-Admins
  • 2192 posts
  • Sexo:Masculino
  • Localidade:Brasília - DF

Posted 28/07/2008, 08:42

Oi Lility, que bom que conseguiu

Seria legal vc postar o código pra qdo alguém precisar já resolver o problema

O fórum (e quem precisar) agradece.

Sucesso aí!

#5 helioth

helioth

    Projeção A

  • Usuários
  • 683 posts
  • Sexo:Masculino
  • Localidade:Mauá city - ABC - SP

Posted 29/07/2008, 02:16

Pelo o que entendi, o lance era a incompatibilidade ao anexar a imagem em seu site, pois alguns browsers não aceitam certas tags usadas. A imagem criada no FW estava normal, neh?

Tem o validador da w3schools que é muito bom para verificar se seu site tem problemas em browsers, mas lembre-se sempre que é muito dificil ser validado 100%. O legal é que eles falam o erro e ainda ensina como arruma, mão na roda, eheh...

Um abraço!
Fórum WMO - Equipe de Design - Monitor
Macho que é macho não chupa mel, masca abelha.
Posted Image

#6 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 29/07/2008, 03:11

Na verdade ela queria fazer uma imagem PNG com transparência funcionar no IE 5 e 6, só que essa imagem tinha que ser carregada pela propriedade background no CSS. O que encontramos facilmente na internet são tutoriais ensinando a fazer com imagens carregadas através da tag <img>, creio eu que era assim que ela estava fazendo anteriormente.

Eu sei como fazer das duas formas, mas vamos deixar a Lility explicar. ^_^

mas lembre-se sempre que é muito dificil ser validado 100%

Então eu devo ser muito fera! :lol:

Porque comigo é o contrário... muito díficil de não validar 100%. :D
att,
Muller Dias
ex-administrador Fórum WMO

#7 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 12:32

Estou passando para deixar o link de um post meu em outro tópico onde eu expliquei como fazer a opacidade do PNG em background funcionar no IE...

http://forum.wmonlin...&...st&p=928195
att,
Muller Dias
ex-administrador Fórum WMO

#8 brunoXP

brunoXP

    EFEI EÔ

  • Conselheiros
  • 2226 posts
  • Sexo:Masculino
  • Localidade:Campinas/Itajubá

Posted 01/08/2008, 00:29

Estive testando este script e não funcionou comigo.
Bruno Toffolo
· Conselho / WebFórum

#9 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 01/08/2008, 02:11

Qual o navegador e versão?
att,
Muller Dias
ex-administrador Fórum WMO

#10 brunoXP

brunoXP

    EFEI EÔ

  • Conselheiros
  • 2226 posts
  • Sexo:Masculino
  • Localidade:Campinas/Itajubá

Posted 01/08/2008, 09:40

Internet Explorer 6.
O Firefox e o IE7 já suportam transparência nativamente. ;)
Bruno Toffolo
· Conselho / WebFórum

#11 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 01/08/2008, 13:25

Passa no outro tópico e posta seu código lá que eu dou uma olhada. ;)
att,
Muller Dias
ex-administrador Fórum WMO

#12 Lility

Lility

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 06/08/2008, 08:17

Oi pessoal

Consegui resolver o problema com a imagem atraves de um script simples
/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
&lt;script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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 = "<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
	  }
   }
}

Copiar e salvar este script como pngfix e acrescentar no codigo que esta o png o seguinte:
<!--[if lt IE 7]>
&lt;script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Isto é para as imagens, nao funciona como background.
Para o background usei css.
<style type="text/css">
<!--
.fundo {
background-image: url(img/meio.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/meio.png);
}
-->
</style>
Mas neste caso se tiver conteudo ou links também nao funcionará, somente para fundo sem links.
Se alguem souber como resolver, seria interessante postar aqui.
Abraços




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq