BOA DICA: PNG com transparência no IE

[Nícolas 4]

Aeee pessoal..

 

Estava pesquisando e como muita gente sabe o IE tem problemas para exibir PNGs com transparência!!!

 

O que acaba forçando a utilizar metodos mais trabalhosos, se matando arrumando uma gif pra não perder qualidade (isso quando fica bom) ou aumentando grosseiramente o código html inserindo flash com a sombra que você quer aonde você quer colocar o efeito de transparência.

 

 

Essa tecnica eu não sei em quantos IEs funcionam, só testei no 6, mas o IE 7 ja aceita PNG :D

 

Agora para de enrrolar e vamo pro código.

 

 

DEIXANDO TODAS AS PNG's (COM EXCESSÃO DOS BACKGROUNDS TRANSPARENTES)

Esse aqui é super facil,só você jogar um javascript no codigo da pagina que ele ja le normalmente.

<!--[if lt IE 7]>

<script defer type="text/javascript" src="pngfix.js"></script>

<![endif]-->

 

<img src="IMAGEM.png" width="300" height="35">

java script: http://homepage.ntlworld.com/bobosola/pngfix.js

fonte: http://homepage.ntlworld.com/bobosola/pnghowto.htm

 

 

BACKGROUNDS PNG'S COM TRANSPARENCIA (Ex: com class fundo)

Agora esse é para que vocês possam utilizar essas png's transparentes como background seja coom class, como id, diretamente na tag e etc.

 

CÓDIGO ATUALIZADO

<style type="text/css">

<!--

.fundo {

background-image: url(imagens/fundo_cima.png) !important;

background-image: none;

filter: none !important;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/fundo_cima.png, sizingMethod='scale');

}

-->

</style>

Ta aeee... E o bom é que é facil de usar!!! e espero que seja útil pra muita gente =)

Flw

 

 

----------------------

 

MENU:

PROBLEMAS COM BACKGROUNDS NOS LINKS DO MENU (Não reconhece fundo como link)

Clique Aqui

 

CONTEÚDO:

PROBLEMAS COM CAMPOS DE FORMULÁRIOS E LINK'S (Não torna os links e formulários ativos)

Clique Aqui

 

 

----------------------

 

 

ATUALIZANDO: Nova alternativa de adicionar PNG transparente via Javascript

Clique Aqui

 

 

----------------------

 

Flw ae pessoal

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

[QuIx 0]

Olá,Boa dica cara vai ajudar batente gente :]~Só que no FF isso funciona também?[]'s

[webflex 0]

Olá,

 

Claro amigo QuIx, o FF nao tem o problema da transparencia do PNG.

 

Cumps [*]

[Guilherme Rambo 4]

Muito bom, postei o link no meu blog: http://www.web2ponto0.com.br/ainda-sobre-t...6-e-inferiores/

 

Valeu!

 

[]'s

[Nícolas 4]

Nossa cara.. show seu blog hein... conhecia não!!! =)Tem bastante coisas interessantes lá.. to feliz que meu tópico esteja la também, heheheheBom... eu vi alguns topicos la ensinando uns meios mais complicados e pessoas falando de bugs e tal..Pelo que percebi esse funciona normalmente...Aqui testei de boa, nem sonhou em ameaçar nenhum bug...Mas isso é uma coisa que só o tempo nos dirá (nossa profundo isso, ehehhe)Mas então.. ta favoritado ja seu blog.. gostei dele parabéns =)

[Guilherme Rambo 4]

Legal, na verdade o IE6 ja ta perdendo posição viu, a M$ ta obrigando o pessoal a atualizar, entam creio que logo logo naum teremos mais a preocupação com certos bugs...[]'s

[CuecaX 0]

Legal, na verdade o IE6 ja ta perdendo posição viu, a M$ ta obrigando o pessoal a atualizar, entam creio que logo logo naum teremos mais a preocupação com certos bugs...[]'s

infelizmente nao eh bem assim... o nivel dos PCs no Brasil ta melhorando, mas nao sao tao bons assim... tem muito pc ae rodando windows 98 em 800x600 http://forum.imasters.com.br/public/style_emoticons/default/upset.gif fora q muitas pessoas (as q nao conhecem o firefox e nao tem ninguem pra contar isso pra elas) vao preferir continuar no IE6 a atualizar pro 7 por ele ser pesado desnecessariamente pra pcs mais fracos :unsure:, ou ainda pior: Algumas nem sabem pra q servem uma atualização :P

[Guilherme Rambo 4]

infelizmente nao eh bem assim...

Desculpa replicar, mas eh assim sim ^^Tenho muitas estatísticas, tanto dos sites de meus clientes quanto de outros sites, o IE7 está ganhando posição muito rapidamente, só não atualiza mesmo quem usa inferiores do winXP, pois como ja disse as atualizações automáticas instalam ele "a força", e os usuarios comuns nem notam que ele foi instalado[]'s

[CuecaX 0]

Dica pro Pessoal:

quem tiver problema da imagem esticar qdo você nao quer, basta abrir o PNGFIX.JS e editar:

 

 

 

onde esta:

sizingMethod='scale'

 

trocar por:

sizingMethod='none'

 

 

tb funciona no do background :)

 

 

-------------------------

 

 

 

infelizmente nao eh bem assim...

Desculpa replicar, mas eh assim sim ^^

 

Tenho muitas estatísticas, tanto dos sites de meus clientes quanto de outros sites, o IE7 está ganhando posição muito rapidamente, só não atualiza mesmo quem usa inferiores do winXP, pois como ja disse as atualizações automáticas instalam ele "a força", e os usuarios comuns nem notam que ele foi instalado

 

[]'s

 

mas temos q concordar q isso eh uma tatica nojenta da M$ neh http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

[Nícolas 4]

Aeee sobre a condicional com IE7.... eu havia mudado para 6, mas aee ele não funciona mais...Não manjo nada dessas tags condicionais mas acho que ali deve ta falando pra jogar isso se a versão do IE for inferior a 7 =)

[CuecaX 0]

IMPORTANTE: Por causa de um Bug no IE6 (pra variar), qdo você usa o png transparente no fundo de um DIV por esse metodo, os links desse div nao podem ser clicados :huh:

[Nícolas 4]

Aee Cueca, isso eu acabei descobrindo junto com você quando fui utilizar em um site, mas encontrei uma solução interessante e lógica pra isso.

 

Como você ta exportando a png com o palco a area transparente ele reconhece como se estivesse vazio, como se não fizesse parte da imagem.

 

Faz o seguinte, deixa a area (fundo) transparente mesmo, e cria um quadrado por cima com 1% de transparencia.

 

Se vai ver que vai funcionar direitinho, hehehe

 

E esse 1% é imperseptivel ao olho humano, claro se você chegar o mais proximo da cor do fundo atual.

 

 

Se você colocar o fundo branoc e criar um quadrado preto você percebe... muito pouco mas percebe.

 

 

O truque é deixar com a mesma tonalidade..

 

 

 

DICA

 

Pra quem usa o Firewoks (como eu), aonde você seleciona o tipo de exportação (gif animado, jpg entre outros)

 

Seleciona PNG32...

 

Quando você salva a png direto ela fica editavel, da quando se vai ver uma imagem ridicula como a que eu tinha feito.

 

Quadrado de 1px por 1px com 20% de opacidade fica com uns 33kb.

 

Ja se você exportar como PNG32 ela deixa de ser editavel e a minha ficou com 184bytes e continuo com a transparencia, e o melhor não é como gif que se taca um degrade para transparente e fica com uma qualidade ruim...

 

Ja teste com degrade e fico show

 

Ele fica com o degrade bonitão tb =)

[CuecaX 0]

Aee Cueca, isso eu acabei descobrindo junto com você quando fui utilizar em um site, mas encontrei uma solução interessante e lógica pra isso.Como você ta exportando a png com o palco a area transparente ele reconhece como se estivesse vazio, como se não fizesse parte da imagem.Faz o seguinte, deixa a area (fundo) transparente mesmo, e cria um quadrado por cima com 1% de transparencia.Se vai ver que vai funcionar direitinho, heheheE esse 1% é imperseptivel ao olho humano, claro se você chegar o mais proximo da cor do fundo atual.Se você colocar o fundo branoc e criar um quadrado preto você percebe... muito pouco mas percebe.O truque é deixar com a mesma tonalidade..

Iiiiihh... mias um hack pra resolver problemas no IE causados por outro hack :P ... to foraeu usei uma solução mais limpinha, criei um outro DIV do mesmo tamanho AO LADO e desloquei para ficar em cima do outro div :P .... funcionou!mas valeu

[Nícolas 4]

aff. pra que se matar com div???assim você polpa mais código e é mais facil e simples de fazer.Sinceramente, eu particularmente não vejo como um hack, mas sim como uma solução lógica, uma vez que não existe nenhuma imagem no fundo da png.Se você colocar uma setinha e uma linha horizontal de divisória, só a setinha e a divisória seriam considerados imagem, o restante não.A unica coisa que fiz foi criar um quadrado com 1% de opacidade.Aqui funcionou perfeitamente, mas ja que se prefere fazer assim né...Cada um é cada um =)Faz o jeito que se achar melhor, mas sou bem mais esse hehehe

[CuecaX 0]

gente, estou ressucitando o topico, mas eh por uma boa causa :P

 

ATENÇÃO QUEM USOU ESSE SCRIPT:

 

aleatoriamente ele deixa o IE6 em loop como se tivesse carregando as imagens png mesmo ja tendo carregado elas...

isso faz com q outro CODIGO JAVASCRIPT NÃO FUNCIONE qdo esse script estiver rodando.

entao cuidado!

 

e bizzarramente isso pára de acontecer qdo você poe um

 

alert(document.images.length)

 

antes do loop for :(, horrivel isso... IE Fede

 

 

 

alguem tem uma ideia pra consertar esse script (conheço mto pouco de javascript) ?

 

EDIT:

Aparentemente isso bloqueia o evento ONLOAD na verdade, evitando q ele funcione...

[( ((phabyo)) ) 0]

Fiz como foi falado e só não consegui fazer o site ficar "clicavel" e no firefox o png não aparece.No caso, tenho outro .js e está funcionando normal tbm.Alguém poderia me explicar de novo como fazer funcionar ?Valeuuu

[Paulo de Tarso F. M. 24]

Fiz como foi falado e só não consegui fazer o site ficar "clicavel" e no firefox o png não aparece.

No caso, tenho outro .js e está funcionando normal tbm.

 

 

Alguém poderia me explicar de novo como fazer funcionar ?

 

 

Valeuuu

Bom, acho que para poder ajudar, precisamos de códigos! Ou se tiver um link para visualizarmos o problema, melhor ainda!!! Pq assim fica difícil... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

[Fabio Alexis 0]

Olá,

 

Esotu usando o java/css para o funcionamento do png com alpha.

http://extranet.e-brand.com.br/incortel/interna.php

 

Só que no IE o conteúdo não fica habilidade, isso é, os formulários e seus elementos e o links da página. No FF é tranquilo.

 

Pelo que vi, a "falha" deve a "substituição" da imagem .png pela blank.gif

 

var realSrc;

var blankSrc = "img/blank.gif";

var isPrinting = true;

 

Alguém sabe o que pode ser e como ajustar?

 

obrigado,

Fabio Alexis

[Nícolas 4]

Fiz como foi falado e só não consegui fazer o site ficar "clicavel" e no firefox o png não aparece.

No caso, tenho outro .js e está funcionando normal tbm.

 

 

Alguém poderia me explicar de novo como fazer funcionar ?

 

 

Valeuuu

Cara no firefox ele não precisa ler codigo nenhum, deve ter sido algo que você fez de errado...

 

sabe oq ue eu acho que foi...

 

Se você for parar pra analizar o codigo la em cima... no em todos os navegadores (Incluindo Firefox) ele adiciona a imagem como backgrounnd normal..

 

<style type="text/css">

<!--

.fundo {

background: url(IMAGEM.png) repeat-y;

width: 100%;

}

-->

</style>

E logo em seguida coloca a tag condicional para somento o IE ler o código tirando o background e botando uma filter..

<!--[if IE]>

<style>

.fundo{

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=IMAGEM.png,sizingMethod='scale');

}

</style>

<![endif]-->

Aee ele faz o IE sobrescrever os dados que eram para o firefox...

 

Na minha opinião você esqueceu da condicional do IE e ele acabou tirando o background do Firefox

 

Por isso do erro...

 

Só deixar igualzinho como foi dito aee em cima que funciona sim

;)

[gsfweb 0]

<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]--><img src="IMAGEM.png" width="300" height="35">

Onde inserir isto? no head? Ja tentei e n consigo. isso ai no head e o img src=IMAGEM no local da imagem.FF e IE 7 normalmenteNo IE 6 a foto fica com o fundo cinza