Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fnando

JIR: Javascript Image Replacement

Por , em Desenvolvimento frontend

Recommended Posts

fnando    0

fnando
Postado

Gostaria de saber a opinião de vocês sobre um script que desenvolvi.

 

Ele substitui tags, identificadas por ID ou CSS Class, por imagens. É baseado no artigo do quirkmodes.org.

 

Testei em diversas plataformas/browsers. Não encontrei erros ainda. Se vocês pudessem analisar, seria legal.

 

Browsers testados

 

* Opera 7.54 (WinXP)

* Opera 8.01 (WinXP)

* Firefox 1.0.4 (WinXP)

* Internet Explorer 4.01 Standalone (WinXP)

* Internet Explorer 5.01 Standalone (WinXP)

* Internet Explorer 5.5 Standalone (WinXP)

* Internet Explorer 6 (WinXP)

* Netscape 6.2 (WinXP)

* Netscape 7.0 (WinXP)

* Nestacape 8.0.2 (WinXP)

* Konqueror 3.3.2 (Linux)

* Safari (Mac OS X)

 

O script está em www.antz.com.br/xlab/jir/example.html

 

É bem simples de usar, caso queiram testar.

 

A idéia é testar o máximo possível.

 

Abraços!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Que massa, gostei muito desse seu script ;DFuncionou blza aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

fnando    0

fnando
Postado

Que massa, gostei muito desse seu script ;D

Funcionou blza aqui

<{POST_SNAPBACK}>

Vlw!

 

Eu tava utilizando o método Phark de substituição de imagens... mas o IE5 muitas vezes não interpretava... então comecei a chamar um arquivo especifico só pra fazer as correções (IE Conditional Comment).

 

Foi qdo resolvi criar o script para suprir essa deficiência..... Diga-se de passagem, o fato de desabilitar imagens e/ou javascript e manter o texto perfeito (o que não acontece com substituição por CSS) é demais!

 

Tenho que fazer alguns testes utilizando um ambiente real (site de verdade, com substituições de verdade).

Compartilhar este post

Link para o post
Compartilhar em outros sites

_ nEoN _    0

_ nEoN _
Postado

Funcionou beleza, porem tenhu um parenteses para abrir aqui.

 

Certo ele substitui legal o ID ou Class pela sua imagem, ok, porem você ainda que criar a imagem, isso complica ainda mais o processo, uma vez que você tem q editar 2 arquivos para fazer o négocio aparecer, creio que o método sIFR seja mais vantajoso, uma vez que não é necessário criação de imagem alguma.

 

Não que seja um trabalho gigantesco criar imagem e substituir, porem acho trabalho em vão sendo que já existem métodos atualizados.

 

Outro método legal de citar é com GD do php. Ele cria um imagem temporária pelo próprio PHP, esta também não necessita de criação alguma de imagem externa.

 

Porémmm, teu script tá bem legal, se for utiliza-lo creio não ter incompatibilidade com nenhum browser.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

fnando    0

fnando
Postado

Funcionou beleza, porem tenhu um parenteses para abrir aqui.

 

Certo ele substitui legal o ID ou Class pela sua imagem, ok, porem você ainda que criar a imagem, isso complica ainda mais o processo, uma vez que você tem q editar 2 arquivos para fazer o négocio aparecer, creio que o método sIFR seja mais vantajoso, uma vez que não é necessário criação de imagem alguma.

 

Não que seja um trabalho gigantesco criar imagem e substituir, porem acho trabalho em vão sendo que já existem métodos atualizados.

 

Outro método legal de citar é com GD do php. Ele cria um imagem temporária pelo próprio PHP, esta também não necessita de criação alguma de imagem externa.

 

Porémmm, teu script tá bem legal, se for utiliza-lo creio não ter incompatibilidade com nenhum browser.

 

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

<{POST_SNAPBACK}>

sFIR, FIR, Phark, ... diversos métodos mas a gente sempre tem preferência por algum. Após testar muitos, gostei bastante do conceito de Phark, sFIR e de JIR.

Em todos os meus sites costumo usar o método Phark (então, o problema de salvar cada imagem, não tem tanta importância afinal).

 

<style>.title { text-index: -9999px; background: url(title.gif) no-repeat; width: 200px; height: 20px; }</style><body><h1 class="title">título</h1></body>

O problema do Phark é a incompatibilidade com o IE4 e IE5, mais especificamente 5.01. Muitos dos sites que construo, analisando as estatísticas, ainda são bem acessados por IE5.01 e pelo IE4.

 

O problema do sFIR é que só pode ser utilizado por browsers que suportam DOM, o que elimina o suporte ao IE4. Não adianta fantasiarmos achando que ninguém mais usa o IE4. Usam sim! E mais ainda o IE5.01 (que vem com o WIN98 SE). E é aí que vi uma brecha para esse script. Não podemos esquecer que a maior parte ainda utiliza conexão discada e convenhamos: atualizar o IE não é nada fácil nessas conexões!

 

Em relação ao GD, vou integrar com o AIRE, projeto bem bacana.

Veja em http://www.stillbreathing.co.uk/experiments/aire/demo/ http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Mas é isso aí! E valeu pelo comentário! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

_ nEoN _    0

_ nEoN _
Postado

O problema do sFIR é que só pode ser utilizado por browsers que suportam DOM, o que elimina o suporte ao IE4. Não adianta fantasiarmos achando que ninguém mais usa o IE4. Usam sim! E mais ainda o IE5.01 (que vem com o WIN98 SE). E é aí que vi uma brecha para esse script. Não podemos esquecer que a maior parte ainda utiliza conexão discada e convenhamos: atualizar o IE não é nada fácil nessas conexões!

Se não me engano, ele mostra o cabeçalho normalmente dependendo da versão, depende mto para o que você vai usar o image replacement, geralmente é usado pra titulos, coisas que nao passem de 100 caracteres.Então ele mostraria o retail style, que fica dentro do seu style default para aquela sessão que está havendo o replacement.Esse problema de "brecha" seria descartado com isso..Porem ainda assim acho o melhor metodo com GD, funciona em todos browsers, não tem erro. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif NeoN

Compartilhar este post

Link para o post
Compartilhar em outros sites

fnando    0

fnando
Postado

O problema do sFIR é que só pode ser utilizado por browsers que suportam DOM, o que elimina o suporte ao IE4. Não adianta fantasiarmos achando que ninguém mais usa o IE4. Usam sim! E mais ainda o IE5.01 (que vem com o WIN98 SE). E é aí que vi uma brecha para esse script. Não podemos esquecer que a maior parte ainda utiliza conexão discada e convenhamos: atualizar o IE não é nada fácil nessas conexões!

Se não me engano, ele mostra o cabeçalho normalmente dependendo da versão, depende mto para o que você vai usar o image replacement, geralmente é usado pra titulos, coisas que nao passem de 100 caracteres.

 

Então ele mostraria o retail style, que fica dentro do seu style default para aquela sessão que está havendo o replacement.

 

Esse problema de "brecha" seria descartado com isso..

 

Porem ainda assim acho o melhor metodo com GD, funciona em todos browsers, não tem erro.

 

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

<{POST_SNAPBACK}>

Concordo quanto ao GD. Mas imagem direto no XHTML? Não sou muito fã!

O sFIR mostra o texto em HTML (forma original antes da substituição).

 

Mas seria legal integrar o JIR com uma classe bacana de GD. Se não encontrar nenhum bug nesse script vou trabalhar para fazer esta integração. ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

[ GuTo ]    0

[ GuTo ]
Postado

Gostaria que vocês postassem links para os mais diversos tipos de image replacement.Estes métodos todos que comentaram: Phark, sFIR, FIR, JIR...Esse GD do PHP, não sei se tem como fazer com ASP não...E esse GD parece ser ruim, pois toda página iria ter de gerar uma img temporária... e quando recarregar a página, dinovo. Não tem cache nem nada.. estou certo?Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

fnando    0

fnando
Postado

,Jul 1 2005, 05:39 AM]Gostaria que vocês postassem links para os mais diversos tipos de image replacement.

 

Estes métodos todos que comentaram: Phark, sFIR, FIR, JIR...

 

Esse GD do PHP, não sei se tem como fazer com ASP não...

E esse GD parece ser ruim, pois toda página iria ter de gerar uma img temporária... e quando recarregar a página, dinovo. Não tem cache nem nada.. estou certo?

 

Abraços

<{POST_SNAPBACK}>

GuTo.... Na verdade com a GD você pode salvar a imagem em um diretório. Antes de criar a imagem você verifica se ela existe ou não e daí cria a imagem, se não existir.

 

Quanto aos métodos, dá uma procurada no Google

http://www.mikeindustries.com/blog/archive...ase-candidate-2

http://stopdesign.com/articles/replace_text/

http://www.mezzoblue.com/tests/revised-image-replacement/

http://phark.typepad.com/phark/2003/08/accessible_imag.html

http://www.stuffandnonsense.co.uk/archives...eplacement.html

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito