Criando um menu com imagens ROLLOVER

Veja o exemplo pronto

Boa Tarde gente, depois de um tempo sem postar devido ao período de provas na Faculdade, estou de volta com um post de dreamweaver, ensinando como criar um menu sem complicações usando imagens rollover.
Então vamos lá

Imagem Rollover (cambiável) é a imagem que muda sua aparecia quando passamos por cima o mouse. Esse efeito é criando usando duas imagens, uma aparece no browser quando o documento é carregado a outra é exibida quando o cursor mouse é passado sobre a imagem rollover.

Nesse exemplo vou fazer com tabela para facilitar a para quem não usa ainda o CSS
Dica: as duas imagens têm que possuir o mesmo tamanho
(altura e largura) para o efeito funcionar com a aparência desejável.

1 - Inicie o Dreamweaver
2 - Crie um documento novo

Para criar o menu (Lembrando que para cada item do menu você precisa ter DUAS IMAGENS do mesmo tamanho):

3- Primeiro vamos criar um recipiente onde colocaremos os botões no nosso menu:

4- Crie uma tabela (caminho: MENU INSERT >> TABLE)
Nosso exemplo: rows: 4 , columns: 1 , table width: 130px , cellpad:2px, cellspace:zero, borda:zero

5 - Vamos colocar os botões no nosso menu dentro da tabela:
6 - Posicione o cursor do mouse onde a imagem do nosso botão vai aparecer:

7 - Insira a sua imagem rollover. Caminho: MENU INSERT >> IMAGE OBJCTS >> ROLLOVER IMAGE). Na caixa de dialogo Insert Rollover image preencha os seguintes campos:

NO CAMPO IMAGE NAME: digite um nome para a imagem Rollover.

NO CAMPO ORIGINAL IMAGE: digite o nome da imagem que será carregada primeiramente no navegador, ou dique no botão Browse para procurá-la em seu computador.

NO CAMPO ROLLOVER IMAGE: digite o nome da imagem que será exibida quando o cursor do mouse passar sobre a imagem original na janela do navegador. Ou dique no botão Browser para procurá-la em seu computador.

NA CAIXA DE SELEÇÃO PRELOAD ROLLOVER IMAGE: selecione esta opção para que o navegador carregue antecipadamente todas as imagens que serão usadas na imagem Rollover.

NO CAMPO ALTEMATE TEXT: digite o texto que será exibido quando o ponteiro do mouse ficar posicionado sobre a imagem.

NO CAMPO WHEN CLICKED, GO TO URL: digite o nome do arquivo que será carregado quando o usuário clicar sobre a imagem rollover ou dique no botão Browser para procurá-la em seu computador. Clique no botão OK para confirmar.

8 - Repita os passos 4 - 5 - 6 - 7 -  nos demais espaços usando os outros botões que já foram confeccionados

Assim você faz os outros botões.



Se foi útil o post comente!!!

Até semana que vem!