05/04/2008 - 7:47 > 24.904 Visualizações > 64 comentários

Rollover Images e efeito no menu

Você já deve ter visto alguns menus com efeitos bem legais e se perguntado como poderíamos fazer isso no dreamweaver, não é verdade? Agora, esta sua dúvida acabou!

Com o Rollover Imagens, podemos estilizar nossos menus com um efeito tipo “hover”, e deixar seu projeto mais bonito e profissional.

Visualiza o efeito no menu do site exemplo, clicando aqui. Passe o mouse pelo menu e veja o efeito. Baixe as imagens utilizadas nesta vídeo aula.

Obs: Participe de nossa pesquisa de satisfação

Bom aprendizado!

Assista à vídeo aula

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

64 respostas para 'Rollover Images e efeito no menu'

André Diz:
5/04/08 às 19:47
Olá Felipe, essa vídeo aula foi fundamental pra mim”
Eu ontem fiz uma pergunta em uma vídeo aula que assisti perguntando se dava pra exportar um botão do fireworks que continha 2 estados pro Dreamweaver, pois eu não sabia fazer isso no Dreamweaver.
Resolvido!
Muito obrigado
Felipe Cardozo Diz:
5/04/08 às 20:33
André, realmente muita gente tem dúvidas de como fazer esse efeito pelo Dreamweaver.

Show que você tenha conseguido!

Abração!
kleber Diz:
2/05/08 às 11:55
PERFEITO!!
José Carlos Diz:
21/06/08 às 15:12
felipe trabalho e não tenho como ver as videos no trabalho então eu baixo elas e vejo em casa.. mais qnd não esta no you tube não consigo baixar.

tem como vc ensinar a baixar os videos que estão no videolog ou vc diponibilizar elas com um link para dow load…

estou adorando este site e ja indiquei para varios amigos obrigado mais uma vez valeuy…
Felipe Cardozo Diz:
21/06/08 às 20:02
José, no vídeolog não teremos a possibilidade de download das vídeo aulas.

Porém, a qualidade das mesmas além do tempo mínimo que não existe são fatores fundamentais que nos fizeram migrar,

[]´s
Márcia Bardaro Diz:
3/07/08 às 11:28
A vídeo aula está travendo logo no início!
tem como resolver este problema???
bju pra todos
Felipe Cardozo Diz:
4/07/08 às 1:49
Márica, tudo bem?

Aqui está normal. Pode ter sido uma instabilidade.

[]´s
Maurício - Santos Digital Diz:
29/07/08 às 12:50
Felipe assistindo essa aula eu percebi que o que estava deixando feio os meus links (com fotos) era o tal do border que voce colocou em 0 , pois é, meu site tem mais de 60 paginas com cerca de 30 links cada que presciso zerar….Tem como zerar todos de uma vez com o ”Find and Replace” ? Se sim qual é esse codigo que eu não achei ? Ou da para mudar em ”Page Properties” ? Obrigado
Felipe Cardozo Diz:
29/07/08 às 16:28
Maurício.
Creio que você não consiga alterar de uma só vez. Por isso que o CSS e Tableless é importante, pois por um arquivo somente você resolveria isso.

[]´s
Gericia Diz:
31/10/08 às 1:05
Não estou conseguindo assistir o vídeo. Está indisponível…
Markines3D Diz:
27/11/08 às 20:09
Parabéns cara
Valeu por dá essa força pra gente
Q Deus abençoe a vida de Voces cada dia mais
Obrigado por tudo galera MXMASTERS
Serginho Diz:
9/12/08 às 4:35
Muito bom cara como sempre mandou muito bem.
O cara explica as coisas com uma naturalidade incrivel, Cara sou teu fã.
Willian Alves - Jaru - Rondonia Diz:
16/12/08 às 13:27
muito boua a video aula…gostei mesmo…mas queria saber se eu fizer esse processo no meu site…ele vai ficar muito pesado…por ter varias imagens…
parabens…
=]
Willian Alves - Jaru - Rondonia Diz:
16/12/08 às 13:28
quer dizer se for muitas paginas no caso..
Alvaro Diz:
22/01/09 às 9:17
O problema deste efeito apesar de legal é que o navegador pede autorização para executa-lo. E como a mensagem do navegador assusta muita gente ou não ve a mensagem ou coloca não.Gostaria de aprender um que ja fosse automatico, como de muitos sites que vc passa e não pede autorização
Gustavo Diz:
26/01/09 às 14:24
Esse site é demais!!!

Vocês estão de parabéns!!!!
Mariana Diz:
29/01/09 às 21:11
Olá, Felipe!!!
Continuo muito empolgada com criação do meu site, afinal de contas jamais me imaginei utilizando esse programa. Estou conseguindo, com as video aulas criar um site bem bacaninha.
Bem, aprendi inserir esta imagem de sobreposição com efeito (rollover), depois de ter criado as páginas do site nas quais para cada ítem do menu (parceiros.html; biografia.html; contatos.html….) que tem como layout básico a home.html (na qual dei o efeito nos ítens do menu). Existe alguma maneira de repetir este efeito nas outras html já criadas sem ter que repetir todo o procedimento?
Espero que tenha me feito entender, pois não conheço a linguagem dos webdesigners.
Muito obrigada
Mariana
Monnahed Diz:
30/01/09 às 10:58
Ola Filipe Cardoso!!! Suas video aulas sao mesmo muito interessantes me ajudam muito, e estou aprendendo muito aqui na Italia convosco. continuem assim e muitos sucessos sucessivos.
Monnahed Diz:
30/01/09 às 11:00
Ai turma do mxmasters de novo monnahed. Filipe gostaria de saber como criar um serviço de e-mail dentro da minha web.
Grazie.
Bebe Diz:
30/01/09 às 11:47
Iae Felipe Cardoso olha Antes eu usava o Dreamweaver CS3 e Formatei o Meu Pc Agora naum tenho mais como baixa o Dreamweaver CS3 e eu baxei o Dreamweaver CS4 para ver e e muito diferente do Dreamweaver CS3 vc poderia manda para meu email o link do Dreamweaver CS3 o email e gm-bebe@hotmail.com

Valeu
naim Diz:
9/02/09 às 2:50
nossa cara nem tem como elogiar tanto bom que fico essa video aula
aprendi demais eu tava sempre querendo fatia um menu e exportar para
dreamweaver valewwwwwwwwwwwwwwwww
gosteiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
muito bommmmmmmmmmmmmm
adoreeiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
aprendiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
muitoooooooooooooooooo
jadson lobato Diz:
26/03/09 às 10:59
não consigo ver esta video aula..o ki posso fazer
jadson lobato Diz:
31/03/09 às 10:15
olá felipe, tenho o flash plugin e o shockwave instalados, mas não consigo ver as video aulas..
grato
andre matos Diz:
9/05/09 às 8:11
olá felipe,porque este vídeo nao está passando todo?estou corioso para ver essa video aula,aguardo resposta. valew !!
Sergio Diz:
13/05/09 às 2:28
Olá Felipe você Poderia me ajudar como eu abaixo a Versão do Dreamweaver CS3 Portugues
GUSTAVO Diz:
26/05/09 às 19:49
Cara não consigo ver o final
Rafael Diz:
3/06/09 às 20:24
Sim Qual tamanho eu crio o Documento no Fireworks??

Obrigado
Eu tow aprendendo mais web design aqui no site de vcs ” Nosso ” xD
do q no curço
Obrigado Rafael sANTOS
Marcio Carlos Diz:
3/07/09 às 12:40
Felipe vlw pela iniciativa de globalizar conhecimento a equipe mxmasters e todos os seus colaboradores estão de parabéns, tem um site de tutoriais muito parecido com vcs mas eles dão prioridade no flash, cara que DEUS abençõe a todos vcs e ilumine o trabalho de todos.

um grande abraço vlw.

o site é http://www.tutors.com.br
Diogo Diz:
17/07/09 às 9:58
Ola Felipe!
Gostei muito da tua vídeo aula mas gostava de saber se dava para fazer isso mas com texto. Por exemplo eu tenho o background do meu menu no dreameaver e vo escrever la dentro do menu Inicio, e gostava de saber como ponho ele em bold passando o rato por cima.
Se souber me responda
Luis Felipe Diz:
1/08/09 às 1:57
Ta mais tem como fazer tbm o sub menu???????

Se souber me responda por favor!
Naiane Diz:
28/08/09 às 14:08
vallllleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeuuU!!!!
Bruno neves Diz:
29/08/09 às 18:24
Obrigado felipe por mais uma vídeo aula instrutiva,
Antonielle Diz:
16/09/09 às 11:28
Excelente aula felipe muito bom mesmo parabéns
Heverton Diz:
7/10/09 às 2:15
olá, Bom dia
felipe sepre q da vejo as suas video aulas,
são muito claras e explicativa..
parabem,,,
so uma coisa posta as video aulas pra ser baixadas
se tiver como claro..
valew.. pelas aulas…
mas uma vez parabens..vlw
David CHC Diz:
7/10/09 às 9:38
@Heverton, a video aulas não são colocadas para download devido q pessoas estavam vendendo as aulas, entre outros motivos
Frad Diz:
15/10/09 às 0:32
Estou montando um site com a ajuda das video-aulas, por exemplo nexta video aula após fazer tudo que aprendi depois de feito quando eu dou f12 o explorer bloqueia o conteudo e pede permição porque isso e como eu tiro? gostaria de aprender a fazer menus e links com efeitos tipo este da pagina de vocês ai verde?
Rodrigo Romanatti Diz:
19/10/09 às 18:16
Cara, parabenizo-os pelas video-aulas, pois com elas meu site esta quase lá, mas preciso de outra dica importante e não encontrei ainda: como crio submenu após ter feito todos os efeitos no menu principal, assim como o desta aula?
douglas Diz:
25/10/09 às 19:37
valeu velho muito bom sou seu fã tenhos todos as suas videos q eu já vi

continue fazendo as videos aulas

eu queria que vc fizesse uma sobre o flash o como fazer um site completo mo flash
se der valeu
até a próxima
Fernando Diz:
11/11/09 às 16:55
Muito boa a video aula, gostaria de agradecer muito ao Felipe Cardoso e toda sua Equipe…
dill Diz:
22/12/09 às 18:38
cara perfeito!!!; Só tem um erro
Você não explicou como salvar par colocar no blog
Aprendi tudo com você menos salvar e linkar e não existe isso na net
coloca ai pra todos valeu!!!!!!!!!
Diego Diz:
14/01/10 às 9:25
Felipe, muito obrigado!!!!
As aulas são ótimas, um conteúdo muito bem explicado e dinâmico.
Após as aulas que venho acompanhando através do Site, os meus trabalhos melhoram a cada dia.
Parabéns a vc e a equipe MX Masters!
rafael Diz:
1/02/10 às 19:13
b.noite, gostaria de saber se tem como passar uma video aula de inframe queria saber como fazer um site com inframe no tamanho 795 x 470
não consigo fazer trocar os canais de tv na msm pg por isso so deixei um canal. obg por esta ajudando sempre as pessoas no seu site fique com deus abraços…
David CHC Diz:
1/02/10 às 19:38
@rafael, o iframes são uma tecnologia em desuso, mas ainda podem ser usados em alguns casos, sendo o jeito mais fácil. Mas o Iframe é facil de mexer

http://pastebin.com/f32731671

No link q vc quer q abra no iframe, basta colocar target com o mesmo nome da name do iframe. E as outras propriedades do iframe, fazendo uma pesquisa rápido no google vc encontra rápidinho.
rafael Diz:
2/02/10 às 20:37
david chc, obg pela dica que deus abençõe vc e sua familia vlw
rafael Diz:
7/02/10 às 11:37
gostaria de saber como tirar as barras de rolagem do meu inframe naum consigo desde já agradeço eu adoro esse site abraços pra todos
David CHC Diz:
7/02/10 às 14:24
@rafael basta colocar scrolling=”no”

<iframe scrolling=”no” …
rafael Diz:
7/02/10 às 14:51
david obg pela dica… so estou com duvidas em que parte colocar inframe scrolling=”no”

obg pela ajuda te agradeço desde já obs: aprendir fazer meu primeiro inframe com sua dica so estou sem saber onde colocar scrolling=”no”
David CHC Diz:
7/02/10 às 15:03
@rafael aqui está um exemplo com vc deve colocar, ainda incluir para tirar a bordar o iframe.

http://pastebin.com/f3aa4eb6e

Para saber as propriedade do iframe:

http://www.w3schools.com/TAGS/tag_iframe.asp
rafael Diz:
7/02/10 às 15:48
david, b.tarde tinha como vc mandar uma formula tipo ja pronto onde eu escolher a opção mude dentro do inframe sem as bordas se puder te agradeço e que o senhor jesus te proteja abraços
David CHC Diz:
7/02/10 às 16:03
@rafael, não entendi o q vc quer. vc quer q fica sem a borda os itens de dentro seria isso? Sobre iframe, o link q te passei tem todas as propriedades, é em inglês, mas se vc pesquisar iframe no google vc vai encontrar muito material em português.
rafael Diz:
7/02/10 às 16:12
david quebrei um pouco de cabeça mas entendir graças a deus e a vc muito obg vc é nota 1.0000000000000 valeu muito obg por tudo devd continue ajudando a quem precisa que deus te ajudara sempre abraços.
rafael Diz:
9/02/10 às 11:19
como fazer no inframe em vez de colocar o nome tipo animal planet pra ele abrir no inframe colocar o logo

desde já agradeço
David CHC Diz:
9/02/10 às 11:22
@rafael com assim, não entendi o q vc quer fazer. Aqui tem video falando sobre iframe.

http://videolog.uol.com.br/video.php?id=391143
rafael Diz:
9/02/10 às 16:13
david b.tarde,
tipo assim quando criamos um inframe que colocamos srctenha um video ou um documento ai no proximo linque que eu clicar para abrir em vez eu colocar link 02 , eu colocaria uma imagem quando eu clicar na imagem abra o link 02 no inframe

obs: eu tenho no inframe uma canal esporte interativo mas quando eu quero mundar para outro canal que eu escolhir animal planet esta lincado no nome em vez esta lincado no nome queria a figura do animal planet
estou aprendendo muito com suas dicas obg e fica com DEUS.

estou aprendendo muito com suas dicas muito obg e fica com D
David CHC Diz:
9/02/10 às 16:20
@rafael, só colocar o link para imagem, mas é mesmo esquema da pagina. Qualquer link q vc quer abra no iframe, vc tem colocar o target referente ao iframe. Um dica q vc se bom para seu aprendizado. Teve uma ideia, não sabe se vai dá certo, tenta fazer, se não der certo tudo bem, pergunte a vontade, se der certo, vc aprendeu como se faz.
rafael Diz:
9/02/10 às 16:26
obg david muito obg msm
rafael Diz:
9/02/10 às 16:39
david eu conseguir fazer… com figura agora quero colocar na parte de baixo direito autorais ja fiz de tudo coloquei na parte de baixo quando dou f12 naum aparece o direito autorais quando estou editando aparece quando dou f12 some rsrs
David CHC Diz:
9/02/10 às 18:09
@rafael colocar dentro do iframe?
Kiko Diz:
13/02/10 às 9:34
Felipe vc tem o dom de eninar, maravilha.
UCHOAGRAFICS Diz:
19/04/10 às 11:48
brother to começando agora a entra de cabeça no webdesign e essas aulas esta me ajudando muito msm vlw ae galera continue assim ta fmz

obrigado.
Luciano Diz:
24/07/10 às 15:04
Cara!!! muito legal consegui fazer direitinho aqui , parabéns pala boa vontade de ensinar a meros mortais a arte de criar…kkkkkkkkkkk.Abraço!!
Robson Diz:
29/07/10 às 19:24
Cara tenho um ano e meio que comecei Curso Tecnico em multimidia, até então nen sábia o que era Web, essas video aulas me ajudam muito. Parabéns por seu trabalho.
Felippe Diz:
20/08/10 às 19:56
Muito bom cara valeu pelas dicas!
Urbano Diz:
22/08/10 às 0:00
É o seguinte: fiz todo o procedimento conf. a video aula, fatiei as imagens, soh que em vez de usar tabelas, usei divs; aproveite criei um template na opção do dreamweaver em “salvar como templates” e criei uma área editavel. no diretorio foi criada a pasta templates, e criei mais uns 3 arquivos html com referencia ao template. coloquei todas as imagens em uma pasta “img”. até aí tudo bem. Eu uso o IE 6.0 e o Gloogle chrome 5.0; testei no no IE funcionou blz, porém no Chrome: não está carregando o Topo, soh aparece os quadrados ref. a fatia. Alguem sabe o que pode ser? será devido ao template. ou a versão do chrome?
Vlw