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 ?
• Como eu uso isto?
• Exemplos
• Suporte nos navegadores
• Licença

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:

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

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.