Efeito rollover

Blz galera, vamos realizar hoje uma tarefa simples, um botão de download para o seu site com efeito de mouse (passar o mouse). Bem, poderíamos muito bem fazer o mesmo efeito no fireworks, porém, o código gerado posteriormente para o comportamento (behavior) seria muito grande, pesando mais o HTML da sua página. Para realizar este efeito, é necessário um mínimo de conhecimento de HTML e CSS. Não conheçe nada sobre eles? Não se preocupe, aqui você pode começar a aprender :)

O botão de download usado neste tutorial é este:

1 – baixe a imagem e abra-a no fireworks. Em seguida, duplique-a. Alinhe-as perfeitamente, uma abaixo da outra. Se precisar, use o painel align (desmarque a opção “to canvas”) e alinhe-as ao centro horizontal (horinzontal center):

2 – clique na primeira imagem, vá no menu “filters > other > convert to alpha”. Assim, a imagem ficará preto e branco

3 – Ainda na primeira imagem, diminua a transparência para 27%:

Esta é a idéia. quando o usuário entrar no site, ele verá a imagem inicial, transparente e sem cores…e ao passar o mouse, mostrara a imagem debaixo dela, a colorida. E isso, nós faremos via CSS.

4 – Crie um slice na sua imagem > Selecione as duas imagens simultaneamente, agrupe-as (ctrl + g), botão direito > insert retangular slice:

5 – Salve a nossa imagem (botão direito nela > export selected slice). Crie um pasta na área de trabalho e salve-a dentro da pasta com o nome botão

6 – Abra o dreamweaver e junto com ele, um novo arquivo HTML. Salve a página na pasta criada anteriormente com o nome index.html. Iremos usar CSS interno no código, pra facilitar. Mas, é recomendado sempre utilizar CSS num arquivo externo.

7 – Dentro da tag body, insira o seguinte código:

<a href=”http://www.lucaspeperaio.com” id=”botao”></a>

Criamos então um link com uma identificação (ID=botão), que iremos referenciar agora em css.
8 – Insira o seguinte código dentro da tag head:

<style type=”text/css”>
#botao{
display:block; /* aqui eu digo para o link se tornar um bloco em torno da imagem */
width:108px;  /* defino a largura da imagem */
height:108px;  /* defino a altura de apenas uma das imagens, neste caso, a 1ª. Isso porque, somente a 1ª imagem deve aparecer antes de passar o mouse */
margin:0 auto; /* defino para posicionar o bloco ao centro da página */
background-image:url(botao.jpg); /*indico o caminho da imagem dupla que nós fizemos no fireworks */
}
#botao:hover{  /* a pseudo-classe “hover” significa quando o usuário passar o mouse */
background-position:0 108px; /* aqui eu defino que o nosso botão desloque 108px pra baixo, ou seja, mostre a imagem de baixo */
cursor:pointer; /* defino pra que apareça a “maozinha” quando passar o mouse” */
}
</style>

Este é o segredo, quando eu passar o mouse (hover), ele irá deslocar o background pra baixo (background-position), revelando assim a segunda imagem. Notem que eu desloquei a imagem em 108px, isso porque as imagens naweb são carregadas de cima pra baixo, então, descendo 108px a partir do topo (background-position:0 108px;), eu revelo a imagem abaixo dela. Caso a nossa imagem fosse de altura 120px, bastaria alterar os valores nos campos heigth e background-position. E ao clicar, o usuário é redirecionado para o meu site, onde tem vários exemplos do rollover com css.

Exemplo funcionando

Espero que tenham gostado, na próxima eu irei ensinar como fazer um menu vertical com css
Qualquer dúvida, postem a vontade
Pessoal, até mais :)

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site





3 Comentários Deixe o seu

  1. Adriano

    tem como fazer esse efeito com varias fotos ou até mesmo 2 mas para ser usado no word ou no excel. eu quero por fotos de um local mas de varios angulos mas quero colocar todas em cima de uma e quando passar o mouse em cima desta vai aparecer as outras como se fosse caixas de inserir comentarios ou com esse efeito.que por sinal foi uma otima dica.

  2. Lucas Peperaio

    neste caso, recomendo que pesquise por jQuery, pois é perfeitamente possivel realizar este efeito. eu tenho um site que ensina a trablalhar com jQuery, com vários exemplos práticos:

    http://www.tutoriaisjquery.com.br

  3. Dimas

    Ótima dica, muito bem explicada. Foi fácil de implementar em meu blog e gostei do resultado. Muito obrigado!