Menu de navegação alterando imagem

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Menu de navegação alterando imagem

Mensagem por Zattch 19.12.11 23:43

Qual é minha questão:
Eu gostaria do seguinte: esete código <img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" /> Seja acrescentado no menu de navegação em todos os botões e que eu só precise alterar os codigos das imagens.
então:Gostaria que alguem elaborasse um cod para que este codigo acima se torne o codigo do menu de navegação e gostaria de saber onde acrescentar esse codigo.

Medidas que eu tomei para corrigir o problema:
''

Imagens do meu problema:
''

Endereço do meu fórum:
http://fairytail-conection.forumeiros.com

Versão do meu fórum:
PHPBB3
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por ShockWave™ 19.12.11 23:53

Poderia Me Mandar Algo Tipo Uma Imagen ?
ShockWave™

ShockWave™
****

Membro desde : 04/03/2011
Mensagens : 296
Pontos : 449

http://habboajudaforum.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 0:08

Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Jack Sparrow 20.12.11 0:48

Tente o seguinte:
Acrescente o seguinte codigo na folha estilo CSS (painel de controle > vizualização > Cores > folha css):

Código:
#i_icon_mini_index {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_portal { background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_calendar {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_faq { background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_search {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_index {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_members {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_groups { background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_profile {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_message {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
ul.navlinks span.new-message {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
#i_icon_mini_logout {background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
i_icon_mini_login { background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}
i_icon_mini_register { background-image: url(http://maujor.com/tutorial/botao_hover.gif);
}

Depois clique em validar
resultou ?
Até mais Muito feliz

OBS: você tera que colocar em todos os botões a imagem : http://maujor.com/tutorial/botao_link.gif
Jack Sparrow

Jack Sparrow
Super Membro

Membro desde : 23/04/2011
Mensagens : 1223
Pontos : 1801

http://www.monsterhunterbrasil.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 12:40

o codigo funciona mas quando passa o mouse por cima as imgs nao mudam'
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 13:05

Zattch escreveu:o codigo funciona mas quando passa o mouse por cima as imgs nao mudam'

Olá,

Poderia nos indicar a imagem a outra imagem que desejas?

Até mais ! Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 13:07

ja está acima'

http://maujor.com/tutorial/botao_link.gif>> essa e a img normal

http://maujor.com/tutorial/botao_hover.gif>> e essa é a img ao passar o mouse
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 13:10

Olá,

As duas imagens são inexistente. Poderia concerta-las?
As duas estão aparecendo: " Not Found

The requested URL /tutorial/botao_hover.gif>> was not found on this server. "

Até mais ! Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 13:12

Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 13:18

Olá,

Siga este code;

Código:
#i_icon_mini_index {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_index:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_portal {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_portal:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_calendar {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_calendar:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_faq {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_faq:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_search {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_search:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_index {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_index:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_members {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_members:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_groups {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_groups:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_profile {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_profile:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_message {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_message:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
ul.navlinks span.new-message {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
ul.navlinks span.new-message:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
#i_icon_mini_logout {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
#i_icon_mini_logout:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
i_icon_mini_login {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
i_icon_mini_login:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}
i_icon_mini_register {background-image: url('http://maujor.com/tutorial/botao_link.gif ') !important;}
i_icon_mini_register:hover {background-image: url('http://maujor.com/tutorial/botao_hover.gif') !important;}

Adicione em:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


Até mais!

Veja se funciona. Caso funcione, me avise que prosseguirei com o código.


Última edição por Gaaratsu em 20.12.11 13:31, editado 1 vez(es)
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 13:25

Não funcionou'
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 13:32

Olá,

Dei uma editada, pelo código completo. Teste e veja se funciona.

Até mais ! Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 13:39

o cod funciona mas so altera uma pequena parte do botao''
MAs está bom''
MAs eu queria só uma coisa teria como você editar esse code para deixar os buttons do meu forum em Rollover na esquerda'

Mais ou menos assim:

Home Page
Portfolio
Equipe tecnica
Parceiros
Album de fotos
Fale conosco
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 13:48

Olá,

O código é este:
td.row1.over:hover {
background-color: #000000;
}
Mas não se esqueça que tem de modificar o que está a vermelho, que é a cor hexadecimal do fundo!

E sim, o código é para colocar na Folha de estilo CSS!

Até mais ! Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 13:53

o cod nao funcionou o menu continua na vertical
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 13:59

Olá,

Painel de Controlo -> Visualização -> Aba " Home Page " -> Cabeçalho & Navegação
No campo "Posição do menu :" coloque em À esquerda!


----------------------------------------------------------------------------------------

Caso o passo anterior não funcionar, adicione o código:

.mainmenu {
text-align:left; !important
}


Painel de Controlo -> Visualização -> Images e Cores -> Cores
Coloque na aba "Folha de estilo CSS"


Leia o seguinte tutorial: Seta [TUTORIAL] Menu de Navegação em Flash

Até mais ! Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 20:09

nao eu gostaria de um codigo para deixar o meu menu de vageção no estilo Rollover alinhado a esquerda e você so me deu o codigo para deixa-lo a esquerda.
Como eu não tenho muito conhecimento com css vc poderia reescrever o codigo com o codigo do rollover?
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Konai 20.12.11 20:10

Olá,

O menu que desejas, é com Flash. Leia o tutorial que lhe indiquei ou faça um Menu com o menu Flash.

Até mais ! Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch 20.12.11 20:21

pode deixar ^^' ja podem concluir este topico
Zattch

Zattch
**

Membro desde : 19/03/2011
Mensagens : 97
Pontos : 139

http://i-webnet.foruns.com.pt

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos