Transparencia Png No Ie
Started By Lility, 27/07/2008, 19:05
11 replies to this topic
#1
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
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
Posted 27/07/2008, 19:52
#3
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....
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
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í!
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
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!
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.
Macho que é macho não chupa mel, masca abelha.
#6
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.
Porque comigo é o contrário... muito díficil de não validar 100%.
Eu sei como fazer das duas formas, mas vamos deixar a Lility explicar.
Então eu devo ser muito fera!mas lembre-se sempre que é muito dificil ser validado 100%
Porque comigo é o contrário... muito díficil de não validar 100%.
att,
Muller Dias
ex-administrador Fórum WMO
Muller Dias
ex-administrador Fórum WMO
#7
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
http://forum.wmonlin...&...st&p=928195
att,
Muller Dias
ex-administrador Fórum WMO
Muller Dias
ex-administrador Fórum WMO
#8
Posted 01/08/2008, 00:29
Estive testando este script e não funcionou comigo.
Bruno Toffolo
· Conselho / WebFórum
· Conselho / WebFórum
#9
Posted 01/08/2008, 02:11
Qual o navegador e versão?
att,
Muller Dias
ex-administrador Fórum WMO
Muller Dias
ex-administrador Fórum WMO
#10
Posted 01/08/2008, 09:40
Internet Explorer 6.
O Firefox e o IE7 já suportam transparência nativamente.
O Firefox e o IE7 já suportam transparência nativamente.
Bruno Toffolo
· Conselho / WebFórum
· Conselho / WebFórum
#11
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
Muller Dias
ex-administrador Fórum WMO
#12
Posted 06/08/2008, 08:17
Oi pessoal
Consegui resolver o problema com a imagem atraves de um script simples
Copiar e salvar este script como pngfix e acrescentar no codigo que esta o png o seguinte:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Isto é para as imagens, nao funciona como background.
Para o background usei css.
Se alguem souber como resolver, seria interessante postar aqui.
Abraços
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]> <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]>
<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)