Menu de navegação alterando imagem

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

Poderia Me Mandar Algo Tipo Uma Imagen ?

http://maujor.com/tutorial/botao_link.gif >>Normal
http://maujor.com/tutorial/botao_hover.gif>> Quando o mouse esta em cima

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

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

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

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 !

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

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 !

http://maujor.com/tutorial/botao_link.gif
http://maujor.com/tutorial/botao_hover.gif

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.

Não funcionou'

Olá,

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

Até mais !

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

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 !

o cod nao funcionou o menu continua na vertical

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: [TUTORIAL] Menu de Navegação em Flash

Até mais !

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?

Olá,

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

Até mais !

pode deixar ^^' ja podem concluir este topico