Usando thumbnails

Às vezes, é necessário exibir uma imagem com maior tamanho e com uma melhor resolução gráfica, para que o visitante possa obter uma maior riqueza de detalhes na sua visualização.

Para não carregarmos diretamente em uma página várias imagens grandes sobrecarregando a mesma, podemos disponibilizar miniaturas destas imagens e estas ao serem clicadas, carregarão sua imagem correspondente com uma maior dimensão. A esta técnica, é dado o nome de thumbnail.

Observe no exemplo abaixo:

No exemplo anterior, quando o visitante clicar na imagem pequena, será carregada em uma nova janela (devido a utilização do atributo target="window") a imagem grande.

Podemos exibir uma imagem referenciada por uma descrição textual.

Exemplo:

<a href="/images/pantanal_grande.jpg" target="window"> Veja uma foto do Pantanal Mato-grossense </a>

Neste exemplo, quando o visitante clicar sobre o texto "Veja uma foto do Pantanal Mato-grossense", a imagem será carregada em uma nova janela.

<a href="/images/paisagem_grande.jpg" target="window"><img src="/images/paisagem_pequena.jpg" height="60" width="80" border="0" alt="Exibe esta imagem com o tamanho ampliado"></a>