menu dinamico

[styller]

Ae galera, aqui estou mais uma vez e gostaria de perguntar o que devo aprender para fazer um menu dinamico.

Bom o que eu fazia para fazer o meu eu usava a opção onrollover para usar duas imagens para obter o efeito, sei que tem como fazer de outra forma sem ser todo o menu em img seria um arquivo css mas não tenho noção, alguém poderia me passar algum link ou uma apostila para iniciante ou até mesmo mostrar o que devo começar a fazer?? Porque dessa forma que faço alem de perder tempo o trafego fica maior mesmo a img sendo pequena o trafego é maior e algo que poderia ser evitado.

Muito Obrigado e agradeço a todos!!

[Jonathan Queiroz]

Movendo: PHP --> Ajax, JavaScript, XML, DOM

O seu objetivo seria mudar a imagem ao passar o mouse por cima ou efeitos do tipo ?

Javascript é a melhor forma de se fazer isso, embora seja possível fazer alguns desses efeitos em JS (da mesma forma que se modifica o estilo de link's quando o mouse está em cima, utilizando a classe com hover, active, etc.)

É mais recomendável se fazer em JS porque com CSS não irá funcionar corretamente em alguns navegadores (o IE6, por ex., só aceita esses efeitos em link's)

[styller]

Movendo: PHP --> Ajax, JavaScript, XML, DOM

O seu objetivo seria mudar a imagem ao passar o mouse por cima ou efeitos do tipo ?

Javascript é a melhor forma de se fazer isso, embora seja possível fazer alguns desses efeitos em JS (da mesma forma que se modifica o estilo de link's quando o mouse está em cima, utilizando a classe com hover, active, etc.)

É mais recomendável se fazer em JS porque com CSS não irá funcionar corretamente em alguns navegadores (o IE6, por ex., só aceita esses efeitos em link's)

seria efeito do tipo, e obrigado por me dar esta dica, estou vendo se consigo fazer em JS se alguém tiver algum modelo ou tutorial para que eu possa aprender fico grato. Obrigado

[fiote]

Que tipo de efeito você está querendo?

É aquele de "mudar imagem ao passar o mouse em cima, e voltar pra original ao tirar o mouse de cima" ?

[styller]

Que tipo de efeito você está querendo?

É aquele de "mudar imagem ao passar o mouse em cima, e voltar pra original ao tirar o mouse de cima" ?

sim esse mesmo que quando eu passo o mouse a imagem altera e quando eu retiro ela volta para a img original

[fiote]

Ok, vamos lá:

Supondo a imagem:

<img name='foto432' src='caminhoAteImagens/foto432.jpg'>

Para cada item do menu você vai precisar de duas imagens, que devem estar nomeadas assim: 1) foto.jpg (imagem padrão) 2) foto_over.jpg (imagem ao ser exibida ao passar o mouse) Resumindo: o nome da imagem deve ser o mesmo nome do name da seu elemento img. Agora você adiciona os eventos mouseOver (ao passar o mouse) e mouseOut (ao tirar o mouse).

<img name='foto432' src='caminhoAteImagens/foto432.jpg' onMouseOver='mostraOutra(this)' onMouseOut='voltaImagem(this)'>

<script>
function mostraOutra(Obj) {
	Obj.src = 'caminhoAteImagens/' + Obj.name + '_over.jpg';
}
function voltaImagem(Obj) {
	Obj.src = 'caminhoAteImagens/' + Obj.name + '.jpg';
}
</script>

Prontin =)

Editado Julho 15, 2009 por fiote

[styller]

Muito Obrigado pelo post, mas o modo que quero fazer é assim. Quando passo o mouse ela muda a img fazendo assim um efeito mas desta maneira teria que fazer para cada item do menu 2 imagens com os textos inclusos na img, queria fazer de um modo em que altere a img quando passar o mouse mas que eu não precise ficar fazendo as imgs um modo seria fazer um arquivo CSS mas no IE6 não funciona, aqui esta um exemplo de como eu gostaria de fazer o meu o problema é que esta em css http://www.direitodeouvir.com.br/teste2/index.html

Muito obrigado mesmo assim. Se tiver mais alguma dica post aqui e mais uma vez obrigado

[fiote]

Você quer alterar A IMAGEM? digo, mudar coisas na IMAGEM? @_@

Se for isso mesmo... não faço idéia de como fazer.

Se fosse um div, e você quiser mudar a borda, a cor de fundo, a cor da fonte... aí tudo bem... mas fazer isso numa IMAGEM? @______________@

[styller]

Você quer alterar A IMAGEM? digo, mudar coisas na IMAGEM? @_@

Se for isso mesmo... não faço idéia de como fazer.

Se fosse um div, e você quiser mudar a borda, a cor de fundo, a cor da fonte... aí tudo bem... mas fazer isso numa IMAGEM? @______________@

não, acho que você não compreendeu o que quis dizer, vou tentar ser mais claro, no site www.direitodeouvir.com.br se voce notar o menu lateral no site fiz com uma imagem de fundo e coloquei o texto por cima da imagem, já no menu do topo é feito em imagem tanto o texto como o design do menu até mesmo se voce for tentar selecionar o texto do menu do topo não tem como porque vai selecionar a imagem inteira, pra fazer este menu do topo eu tive que fazer duas imagens pra categoria página inicial, modelos de aparelho, preços de aparelhos, atendimento 0800 e fale conosco.

O que eu quero é o seguinte igual lhe motrei no link a cima um arquivo css ele simplesmente pega a imagem faz o efeito rollover e na parte de design voce pode colocar seu texto em cima da imagem fazendo com que voce use a mesma imagem para cada categoria e não varias para ter este efeito no menu. Se possivel baixe aquela pagina e abra com o dreamweaver e voce entendera mais sobre o que quero fazer. :lol: