jQuery - image replacement com 4 linhas

14/01/2008

Olá pessoal,

precisei usar image replacement em um projeto, mas um IR dinâmico. Resolvi então implementar um em jQuery.

TEXTO PURO
HTML:
  1. <h2 class="ir">Titulo</h2>
  2. <a href="http://www.tuliofaria.net" class="ir">Tulio</a>

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. $(".ir").each(function(){
  3. t = $(this).text();
  4. $(this).text("");
  5. $(this).append('<img src="geradordaimagem.php?texto='+escape(t)+'" alt="'+t+'" border="0" />');
  6. });
  7. });

O script PHP para a geração dos títulos pode ser conseguido em: http://www.alistapart.com/articles/dynatext , aliás, no neste post no ALA tem também o JS (não jQuery, rs) de como se fazer o mesmo.

Prefiro o meu, que basta colocar a classe ir, ou qualquer outra (configurando o script) e mandar substituir.

Abraços pessoal e até a próxima!

8 Comentários »

  1. Sadjow Medeiros Leão said,

    Janeiro 14, 2008 @ 14:14

    Túlio,

    Isso pega com acentos !?
    iso-8859-1 e utf-8 ?

    Valeus!

  2. Tulio Faria said,

    Janeiro 14, 2008 @ 17:46

    Olá Sadjow,

    nos testes que realizei funcionou sim. O maior problema foi no script PHP que gera o texto em imagens que apresentou alguns problemas no linux para fazer isso, mas no win funcionou normal.

    Abraços,

  3. Alexandre Magno said,

    Janeiro 30, 2008 @ 09:13

    Muito boa a idéia, isto mantém o html puro. Muito bom!

  4. Chris Benseler said,

    Janeiro 7, 2009 @ 14:14

    Bem mais bacana do que aquela solução de criar um flash dinâmico, ao meu ver!
    Abraço!

  5. Igor de Paula said,

    Março 1, 2009 @ 16:50

    Voce poderia disponibilizar um exemplo neh?

  6. Webdeveloper said,

    Setembro 24, 2009 @ 14:09

    Nice article about image replacement!

  7. adriano said,

    Maio 29, 2010 @ 02:32

    tulio há um erro no texto do script, onde vc escreve:

    $(this).append('');

    devemos trocar texto por text, que é o que o php espera receber.Fica assim o texto:

    $(this).append('');

    agora ele funciona ok.

    obrigado pelo seu script ele é muito util.

  8. adriano said,

    Maio 29, 2010 @ 02:34

    oçada o sistema cortou o texto correto mas, é só trocar o texto apos o
    img src=geradordaimagem.php?texto

    por
    img src=geradordaimagem.php?text

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário