Menu de navegação alterando imagem

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

Resolvido Menu de navegação alterando imagem

Mensagem por Zattch em 19/12/11, 09:43 pm

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
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por ShockWave™ em 19/12/11, 09:53 pm

Poderia Me Mandar Algo Tipo Uma Imagen ?
avatar

ShockWave™
Nível 10

Masculino
Inscrito dia : 04/03/2011
Mensagens : 296
Pontos Ativos : 449

Ver perfil do usuário http://habboajudaforum.forumeiros.com

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 19/12/11, 10:08 pm

avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Jack Sparrow em 19/12/11, 10:48 pm

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
avatar

Jack Sparrow
Membro do Fórum

Masculino
Inscrito dia : 23/04/2011
Mensagens : 1223
Pontos Ativos : 1801

Ver perfil do usuário http://www.monsterhunterbrasil.com

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 10:40 am

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

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 11:05 am

@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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 11:07 am

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
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 11:10 am

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


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 11:12 am

avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 11:18 am

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, 11:31 am, editado 1 vez(es)
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 11:25 am

Não funcionou'
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 11:32 am

Olá,

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

Até mais ! Piscada


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 11:39 am

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
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 11:48 am

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


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 11:53 am

o cod nao funcionou o menu continua na vertical
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 11:59 am

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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 06:09 pm

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?
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Gaaratsu em 20/12/11, 06:10 pm

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


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Menu de navegação alterando imagem

Mensagem por Zattch em 20/12/11, 06:21 pm

pode deixar ^^' ja podem concluir este topico
avatar

Zattch
Nível 7

Masculino
Inscrito dia : 18/03/2011
Mensagens : 97
Pontos Ativos : 139

Ver perfil do usuário http://i-webnet.foruns.com.pt

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum