iMasters | Por uma internet mais criativa e dinâmica

Terça-feira, 13/07/2004 - 01:00 - Por Mauricio Samy
Seções relacionadas:

• CSS

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 5 comentários

Objetivo

Mostrar como obter a ampliação de uma imagem ao se passar o mouse sobre ela, com uso de CSS. Ao final da leitura desse artigo, você estará capacitado a projetar um thumbnail de imagem que será ampliado quando o visitante passa o mouse sobre ele.

A técnica CSS empregada

O efeito de zoom da imagem será obtido ao se passar o ponteiro do mouse sobre a imagem.
Isto imediatamente nos faz lembrar de uma ação CSS básica, já nossa velha conhecida. Você saberia responder que ação é esta?

Responda e confira sua resposta:

Desta forma, podemos estabelecer a estratégia para fazer funcionar o zoom.

1. a imagem menor (thumbnail) será como um link no estado em repouso, estado "UP";
2. a imagem ampliada (zoom) será como o link no estado com o mouse em cima, estado "OVER"

Veja aqui o zoom em ação

Preparando a imagem

Para o zoom precisamos de duas imagens. A imagem menor e a imagem ampliada. Mas, com o uso das CSS, as duas imagens serão montadas em uma só e o funcionamento você verá adiante.

Agora observe abaixo a imagem que usaremos:

O thumbnail tem dimensões de 120px x 90px;
A imagem ampliada tem dimensões de 400px x 300px.
E, repito: Não são duas imagens! Trata-se de imagem única construída, uma em cima da outra.

O funcionamento do zoom

Para fazer funcionar o zoom, vamos estabelecer regras CSS capazes de:

• no estado "UP" do link, mostrar como background (fundo) o thumbnail. O canto superior esquerdo da imagem no canto superior esquerdo de uma div com dimensões iguais a 120px x 90px;
• no estado "OVER" do link, mostrar como background (fundo) a mesma imagem mas agora deslocando o canto superior esquerdo 90px (altura do thumbnail) para cima em uma div com dimensões iguais a 400px x 300px.

O código HTML

Observe a seguir o código HTML para o zoom:

........

Entendendo o código:

• um link "morto" e sem texto para aplicar os estados de links no zoom;
• um parágrafo (elemento nível de bloco) contendo o link e identificado com a id que eu nomeei "thumb";
• uma div contendo o parágrafo identificada com a id que eu nomeei "zum"

As regras CSS

Tendo entendido a teoria da solução do problema vamos estabelecer as regras CSS.

body {margin:20px;} /* Esta regra destina-se tão somente a colocar as imagens a uma distância de 20px para a esquerda e para baixo na tela do computador e não influi no zoom */

#zum {
width: 120px; /* largura da div = largura thumbnail */
height: 90px; /* altura da div = altura thumbnail */
background: url(flor.jpg) 0 0 no-repeat; /* coloca a imagem dentro da div na posição 0 0 e sem repetição */
margin: 0;
padding: 0;
}

#thumb a { /* estado "UP" do link */
height: 90px; /* altura do thumbnail */
display: block; /* converte de inline para block permitindo exibição com a largura e altura determinadas */
}
#thumb a:hover { /* estado "OVER" do link */
width: 400px; /* largura da imagem */
height: 300px; /* altura da imagem */
background: transparent url(flor.jpg) 0 -90px no-repeat; /* fundo da div notar que as coordenadas 0 -90px obrigam a imagem de fundo a "subir" 90 px */
}

Observando atentamente as regras CSS acima e com as dimensões do thumbnail e da imagem ampliada em mente, você entenderá o funcionamento do zoom.

O efeito de zoom da imagem será obtido ao se passar o ponteiro do mouse sobre a imagem. Isto imediatamente nos faz lembrar de uma ação CSS básica, já nossa velha conhecida. Você saberia responder que ação é esta?

Fiz esta pergunta no começo do artigo. Browsers sem suporte para JavaScript não conseguem visualizar a resposta onde foi colocada.

Aqui a resposta:

A ação CSS onde ocorre uma mudança com o mouse em cima, é típica do comportamento de links, com a pseudo classe a:hover

Descubra a versatilidade das CSS
Projete conforme as Web Standards.

Um abraço e até a próxima.

5 comentários publicados

• 1. Zoom!?

  Quarta-feira, 21/07/2004, por Paulo Ricardo Challes

  Opa cara você fez uma confusão, isso não é zoom... é ampliação de imagem.

  Responder comentário

• 2. Acho que ouve engano..

  Sexta-feira, 23/07/2004, por Jonas Rocha Rosado

  Onde está zoom nesse artigo..? è bem interessante mas não devia estar com esse titulo..

  Responder comentário

• 3. Mestre em CSS

  Sábado, 24/07/2004, por Vimerson Dantas

  Mauricio,
  
  Eu achava que sabia bastante de CSS e soh fui saber que nao apos ver o seu site e o seu trabalho.
  Mauricio, parabens pelo trabalho perfeito, voce aumentou meus horizontes em relacao ao CSS.
  Obrigado e parabens tambem para a equipe IMasters.

  Responder comentário

• 4. Otima Matéria

  Segunda-feira, 06/06/2005, por Benito Graciano

  Adorei a Matéria Parabéns

  Responder comentário

• 5. Uma dúvida...

  Quinta-feira, 15/12/2005, por Joyci Grazielly Januário

  Olhando este artigo tive a impressão de que o efeito zoom poderia ter sido feito de outra maneira.
  Pensei em ter apenas a imagem maior, e mandar mostrá-la reduzida mudando as propriedades width e/ou height, e quando o mouse passar em cima mudar então esses valores para o tamanho real dela?
  Isso reduziria o espaço utilizado no servidor para o caso de muitas fotos.
  Será que essa solução nao seria melhor? ou tem outro motivo para se ter um thumb de cada imagem?

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

google youtube tecnologia celular lançamento web ti publicidade brasil crescimento seguranca linux php mobile gerência photoshop internet apple desenvolvimento design mercado yahoo microsoft 3g windows iphone

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!