jQuery – image replacement com 4 linhas

Olá pessoal,

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

  1. <h2 class="ir">Titulo</h2>
  2. <a href="http://www.tuliofaria.net" class="ir">Tulio</a>
javascript
< view plain text >
  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 Comment

  1. Túlio,

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

    Valeus!

  2. 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. Muito boa a idéia, isto mantém o html puro. Muito bom!

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

  5. Voce poderia disponibilizar um exemplo neh?

  6. Nice article about image replacement!

  7. 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. 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

Deixe uma resposta