Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Thumbnail em links

Publicado em: 2006-07-23 — 76.739 visualizacoes

Ferramenta link thumb

Os laboratórios do blog arc90.com desenvolveram uma interessante ferramenta baseada em JavaScript, que uma vez instalada no site acresenta um comportamento extra ao estado over (a:hover) dos links aos quais seja atribuida uma determinada classe.

Quando o usuário coloca o ponteiro do mouse sobre o texto do link surge uma pequena imagem sob o link, mostrando um thumbnail com a imagem do destino do link. Por exemplo, se o link aponta para o site do Maujor, a imagem mostra a página home do site do Maujor.

Antes de prosseguir veja como isto funciona nesta página exemplo.

Uma funcionalidade pelo menos muito interessante.
A seguir a tradução das instruções para instalar a ferramenta, bem como o link para download dos arquivos necessários.

Uma imagem vale mais do que mil palavras, certo? Então que tal incrementar seus links de texto com uma imagem usando a ferramenta Link Thumbnail, desenvolvida pelo lab.arc90.com.

O que é isto ?

Um pouco de JavaScript, um pouco de CSS, uma pitada de percepção extra-sensorial e o Link Thumbnail está pronto para mostrar aos usuários prestes a deixar seu site, para onde exatamente eles estão indo. Quando o ponteiro do mouse é colocado sobre o link aparece uma pequena imagem mostrando o destino do link. Isto é um belo apelo visual com um real propósito: fornecer uma visão clara e inequívoca do que está por vir.

Como eu uso isto?

Download do código

Clique no link a seguir para fazer o download do script para o Link Thumbnail:

Download

O arquivo, linkthumb.zip, contém o script, uma imagem e uma página de exemplo. Descompacte o faça o upload para o seu site, do script e da imagem. Mas, atenção ambos devem ficar no mesmo diretório.

Lincando para o Javascript e para a folha de estilo

Nas páginas onde será implementado o Link Thumbnail, você deverá adicionar um link para o script. Assegure-se de indicar o caminho certo para o local onde você colocou o script no servidor. A seguir você precisa adicionar os estilos CSS na página. Abaixo o código necessário para isto, para você copiar e colar na seção HEAD da página:

<script type="text/javascript"> 
src="http://myserver.com/path/to/javascript/arc90_linkthumb.js">
</script> 
<style type="text/css" media="screen">
.arc90_linkpic { 
  display: none; 
  position: absolute; 
  left: 0; 
  top: 1.5em; 
  } 
  
.arc90_linkpicIMG { 
  padding: 0 4px 4px 0; 
  background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; 
  }
</style> 

Atibuindo uma classes aos elementos a dos links

Nos links que você quer que a ferramenta funcione, ou seja que apareça o thumbnail do destino, deverá se acrescentada a classe “linkthumb” ao elemento a, como mostrado no exemplo a seguir:

<a href="http://www.destino.org" class="linkthumb">

Thumbnail para todos os links da página

Se você quer thumbnail em todos os links da página, não precisa adicionar a classe a cada um deles, basta acresentar a seguinte linha de código na seção HEAD da página:

<script type="text/javascript">
arc90_linkThumbUseClassName = false;
</script>

Exemplos

A página exemplo para o Link Thumbnail que mostrei no início pode ser vista outra vez aqui .

Suporte nos navegadores

O Link Thumbnail foi testado e funciona nos seguintes navegadores:

  • Internet Explorer 6.0+
  • Mozilla Firefox 1.5+
  • Apple Safari 2.0
  • Opera Version 8.51+

Licença

A licença de uso para esta ferramenta desenvolvida pela arc90 esta regulada pela Creative Commons Attribution 2.5

Créditos

Este artigo é uma tradução do original em inglês publicado em http://lab.arc90…_thumbnail.php

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-07-23 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/07/23/link-thumbnail/trackback no seu site.

16 comentários na matéria: “Thumbnail em links”

  1. MaurícioNo Gravatar disse:

    Olá. Tenho uma dúvida: O thumb é atualizado automaticamente? Ou seja, se houver alteração na página indicada no link o thumb vai mudar também?
    Obrigado

  2. GustavoNo Gravatar disse:

    Eu também abtive erro na utilização. Não consegue carregar a imagem do site. Alguém pode dar uma dica?

    obrigado…

  3. phitessNo Gravatar disse:

    O código deste Thumbnail está correto??!!!Pois está dando um erro na hora de puxar o arquivo…

  4. IvaldoNo Gravatar disse:

    Testei e funcionou muito bem, exceto quando o link está no final ou nas extremidades da página.

    Quanto ao snap para imagens, descobri um script excelente. Na verdade é uma tooltip para imagens. Funciona inclusive quando o link está no final/extremidade das páginas.

    Vejam em: ttp://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

  5. RafaelNo Gravatar disse:

    Maujor parabéns pela tradução.

    Maujor, algumas dúvidas surgiram durante o uso:

    1º) O snap não funciona com link em imagens ?

    2º) Como fazer para a imagem snap aparecer abaixo do link, pois a mesma fica fora de posição na tela?

  6. MaxNo Gravatar disse:

    Obrigado pela dica. É o que estava procurando

  7. Newton de Góes HortaNo Gravatar disse:

    Acabei de descobrir este site que fornece o serviço de thumbnail para os links de forma gratuita. É necessário apenas se registrar, copiar o código fornecido e colar na head do blog ou site.

    http://www.snap.com/about/spa1A.php

    Rápido, funciona legal e com um visual bonito. Está em funcionamento no Viche no tema Kuler

  8. CamiloNo Gravatar disse:

    Legal, mas estou usando o IE 6 (usuário do papai….) e não funcionou nada, acredito que no Firefox deva funcionar, mas no IE não está rodando.

  9. João Cl. dos SantosNo Gravatar disse:

    Legal, muito lega…
    Será muito últil….
    Parabéns…….

  10. Carlos EduardoNo Gravatar disse:

    Havia visto mas não tinha certeza se poderia ser uma boa idéia utilizá-la… Mas já que apareceu por aqui, então me parece não haver nenhum problema quanto à isso!

  11. Jader RubiniNo Gravatar disse:

    Show de bola essa dica!
    O ponto negativo é que em links muito próximos ao final da página, como no último link da sua página de exemplos, não dá muito certo… 🙁

  12. Leonardo ProcópioNo Gravatar disse:

    Muito bom! Mais uma ferramenta q na se for utilizada com boa idéia, vai longe!!!
    Muito obrigado!

  13. Paulo SouzaNo Gravatar disse:

    muito interessante…não conhecia a ferramenta não, mas a partir de agora será interessante implementar em alguns projetos futuros!

  14. Lucas AlvesNo Gravatar disse:

    Show de bola Maujor!
    Valeu pela dica!

  15. Pedro RogérioNo Gravatar disse:

    Já conhecia essa ferramenta, mas valeu a dica!!!!

  16. DiegoNo Gravatar disse:

    Nossa!!!…..realmente é de grandes ideias que a web é formada…..fiquei impressionado……obrigada pela traducao e por compartilhar Maujor ….parabens pelo Blog e pelo site! Aprendo mt por aqui.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo