Essa dica é muito legal para aqueles WebDesigns iniciantes que querem agregar um certo valor ao seu website ou blog. Para quem não sabe, um button com função Rollover é aquele botãozinho que muda de cor quando o mouse fica em cima dele. Pode parecer besteira, mas esse efeito causa uma ótima impressão para o visitante.
Para iniciar, passe a seta do seu mouse em cima da figura(button) abaixo, e veja do que estamos falando.
 |
O efeito é realmente interessante, e isso graças a uma simples tabela. veja o código:
Bem, agora vamos ao tutorial propriamente dito:
Nota: O conhecimento mínimo em Html se faz necessário.
1) Primeiramente, você deve criar e hospedar suas imagens. Esse buttons do exemplo foram criados com o EasyButton e MenuMaker, excelente software para confecção de buttons. As imagens foram hospedadas no próprio Blogger.
2) Após a criação e hospedagem dos buttons, coloque no código as Urls das suas imagens. Mude o tamanho delas tambem se for preciso, altere os links e tudo mais.
Note que a imagem principal ocupa duas posições no código. No exemplo a imagem principal é: http://2.bp.blogspot.com/_MLcPIoBPiMU/SsZHyHKxsJI/AAAAAAAAEvA/AGwG40CfYeE/s320/mouse+rollover.gif e a secundária, ou seja, a que aparece quando o mouse passar por cima é: http://1.bp.blogspot.com/_MLcPIoBPiMU/SsZHyfljS6I/AAAAAAAAEvI/NQ74B1cclBQ/s320/mouse+rollover+over.gif
Para acrescentar mais buttons e assim criar uma barra de navegação é simples. Basta repetir o código da tabela entre entre as tags tr e /tr .
Esperamos ter ajudado. Se gostou ou ainda tiver alguma dúvida, comente!
|
 |
mas como eu fasso a barra horizontal???pois naum entendi esse negocio de repetir o codigo da tabela entre as tags tr e /tr!!!!deu tudo certo so isso q naum consiguo fazer ajuda eu ae!!!!!!!