Advertisement:

Author Topic: Imagem no menu, alterar quando passar o mouse  (Read 15601 times)

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Imagem no menu, alterar quando passar o mouse
« on: May 21, 2011, 07:14:13 AM »
Editei meu tema do SMF trocando de texto para imagens os itens do menu. As imagens ficaram corretas mais eu queria dar um efeito de quando passar o mouse sobre cada botão ela fosse alterando para outra imagem.

Como poderia fazer isso?
OB: Para adicionar as imagens eu alterei o Subs.php que está dentro da pasta source.

Obrigado a todos.

Offline vms

  • Full Member
  • ***
  • Posts: 437
  • Gender: Male
Re: Imagem no menu, alterar quando passar o mouse
« Reply #1 on: May 21, 2011, 08:45:48 PM »
informe qual a versão do smf e o tema que está a usar.


Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #2 on: May 22, 2011, 12:48:22 AM »
Aconselho a tentar fazer isso usando css, veja o portal do meu forum: www.dungeonmakers.com.br  .. nos botões grandes do menu ao passar o mouse a imagem é trocada, veja se é isso que vc quer fazer..

Se for isso que tu quer fazer, tem um tuto muito bom que fala como fazer isso: http://maujor.com/tutorial/menurollimg.php
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #3 on: May 22, 2011, 06:57:15 AM »
Minha versão é SMF 2 RC5.


Mais tipo cara seu portal é wordpress sendo que todos botões sempre é visível tanto para visitantes tanto para cadastrados. Ja no SMF só pode ficar visível os botões como por exemplo os de perfil, sair, entre outro para as pessoas já cadastradas.

Queria saber se existe um tutorial especifico para o SMF.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #4 on: May 22, 2011, 12:24:21 PM »
O que tem a ver que é no wordpress? Os códigos para a animação são feitos em css que serve tanto para wordpress quanto para smf, pois no smf soh é feita uma condição para ver se o membro está registrado ou se é adm, isso não interfere em nada sobre essa parte de animação...

Tanto é verdade que veja o meu forum em smf: www.dungeonmakers.com.br/forum
passe o mouse por cima de um botão do menu e verá que acontecerá uma animação, e eu fiz isso usando css, coisa que serve para wordpress, smf, e qualquer outra ferramenta que suporte css e html ...

Vc pelo menos deu uma olhada no tutorial que eu postei? Faça o teste e tente usar isso no seu menu do smf ......
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #5 on: May 23, 2011, 12:33:12 PM »
Primeiramente obrigado por está me ajudando, bom cara eu vi o tutorial que você me mandou sim mais não consegui entender como colocar ele no meno do smf, meus conhecimentos em css são básicos consigo fazer poucas coisas com ele. Gostaria de saber como especificamente eu coloco uma imagem no menu e ao passar o mouse nela mudar, não precisa ter texto em cima da imagem pois isso eu escrevo quando criar a mesma.

Obrigado novamente.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #6 on: May 24, 2011, 02:01:34 AM »
Ao invés de trocar a imagem fazendo com que outra imagem seja carregada ao passar o mouse (fazendo com que o site fique mais lento) não seria mais conveniente deixar a imagem com efeito de transparência ao passar o mouse por cima dela? Fazendo assim é até mais simples para eu te explicar como funciona o código CSS para isso ..
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #7 on: May 24, 2011, 02:08:16 PM »
Sim, gostaria de ser com efeito transparente, pois eu ia fazer a mesma coisa só que eu pensei que seria mais fácil usar outra imagem. Mais como você disse que é mais fácil por a transparência, ficaria muito agradecido se puder me explicar.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #8 on: May 24, 2011, 10:26:51 PM »
Claro ficarei feliz em poder te passar o código que uso no meu próprio forum para te ajudar com isso.

Abra o arquivo index.css do seu theme, nele coloque este código:
Code: [Select]
.MenuAnimado:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
-moz-opacity: 0.5;
opacity: 0.5;
}

Com esse código você consegue dar um efeito de transparencia ao passar o mouse por cima de uma imagem que tenha o link sendo da classe "MenuAnimado", em cada linha tem um código para um navegador diferente, se não me engano a primeira linha é para o IE 8 e 9 onde o 85 é a opacidade que a imagem vai ficar ao passar o mause sendo que o máximo é 100.

Na segunda linha é o código para o Mozilla onde o valor máximo de opacidade é de 1.0

Na terceira linha é o código para o chrome, opera e safari, acho que também funciona para o Mozilla, onde o valor máximo de opacidade também é de 1.0

agora basta você ir na imagem do seu menu e definir esta classe à ele, exemplo:
Code: [Select]
<a href="url_opção_1" class="MenuAnimado"><img src="primeira_opção" /></a>

Neste exemplo ao passar o mouse por cima da imagem a transparencia seria mudada como foi definido no código css.

qualquer dúvida é só falar.
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #9 on: May 25, 2011, 02:18:58 PM »
Ae cara mais uma vez muito obrigado mesmo por está me ajudando  ;)

Funcionou direitinho *-* so ficou faltando o botão de deslogar do fórum pois o link dele muda pra cada usuário, ae num deu pra eu fazer aqui. Mais todos outros deram certo muito obrigado.
Se puder me diser como faço para o botão do logoff ajudaria mais ainda  ;)

Desculpa está dando trabalho mais existe um código para centralizar o menu?

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #10 on: May 25, 2011, 02:35:50 PM »
Como assim o link muda para cada usuário? A parte "<a href" do código do link é a mesma para qualquer usuário o resto é alterado via php, então basta colocar o class="MenuAnimado" depois do que está dentro do href .. poderia postar o código do seu menu para eu ver como está e o pq de vc não conseguir colocar essa classe no botão de logoff?

Para centralizar o menu basta colocar ele entre as tags <center></center>

Opa e disponha amigo, estamos ae para o que precisar ^^
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #11 on: May 25, 2011, 03:06:12 PM »
Eu coloquei a do logout assim:
Code: [Select]
<a href="http://mmorpgbr.net/smf/index.php?action=login" class="MenuAnimado"><img src="http://mmorpgbr.net/smf/Themes/MMORPGBR/images/menu/sair.JPG" /></a>
So que ao clicar aparece isso:
Quote
Ocorreu um Erro!
Verificação da sessão falhou. Por favor faça logout depois login e então tente novamente.

Sobre o centralizar. Onde coloco o código, para centralizar todo menu.
« Last Edit: May 25, 2011, 03:34:04 PM by lendario »

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #12 on: May 25, 2011, 05:31:33 PM »
Isso não tem a ver com a animação, o problema é que vc não colocou a seção para fazer o logout, deveria ficar assim:

Code: [Select]
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="MenuAnimado"><img src="http://mmorpgbr.net/smf/Themes/MMORPGBR/images/menu/sair.JPG" /></a>
Veja também que vc usou o action=login ao invés do action=logout ..

Para centralizar basta vc colocar <center> antes do primeiro item do menu e </center> depois do último item do menu..
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #13 on: May 25, 2011, 06:11:38 PM »
Olha cara o logout num funcionou não, o código deixou a pagina toda fora de linha "/
E o center ele centraliza todos botões no meio deixando um a cima do outro.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #14 on: May 25, 2011, 08:15:20 PM »
Anexe a sua página index.template.php para eu ver como ficou o código do seu menu
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #15 on: May 25, 2011, 09:56:15 PM »
A index.template.php ou a Subs.php ?
Pois eu estou editando o arquivo Subs.php da pasta Source.

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #16 on: May 26, 2011, 01:41:01 AM »
Ah sim entendi, pelo que vc tinha dito achei que estava alterando direto no index.template.php, então anexe o Subs.php mesmo..
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #17 on: May 26, 2011, 08:14:46 AM »
Envidado por mensagem privada  ;)

Offline TaijovuNeji

  • SMF Hero
  • ******
  • Posts: 1,542
Re: Imagem no menu, alterar quando passar o mouse
« Reply #18 on: May 26, 2011, 02:16:32 PM »
Eu dei uma olhada aqui no arquivo que você me mandou, reparei em uma coisa muito estranha, é só o logout que não funciona? Poderia selecionar as imagens do menu e pelo navegador exibir o código fonte só desta parte para eu ver como que ficou o menu?

E para centralizar o menu seria mesmo no arquivo index.template.php, procure onde tem esse código:
Code: [Select]
<div id="main_menu">
Antes deste código colog a tag <center> e então procure por esse código:
Code: [Select]
    echo '
            </ul>
        </div>';
(código que fecha a lista e depois a div do menu, e então depois de </div> coloque a tag </center>
« Last Edit: May 26, 2011, 02:20:48 PM by TaijovuNeji »
Hospedagem 20GB, Cpanel, Windows ou Linux, com suporte a PHP ou ASP, R$ 30,00 por mes ou 290 por ano

meu site: http://www.dungeonmakers.com.br/forum
Não atendo PM para pedidos de suporte/ajuda. Para isso existe o forum!!!

Offline lendario

  • Jr. Member
  • **
  • Posts: 139
Re: Imagem no menu, alterar quando passar o mouse
« Reply #19 on: May 26, 2011, 03:14:06 PM »
Sim é apenas o logout que não está ficando transparente, não entendi o que me pediu para fazer.

Procurei no index do template mais não tem:
Code: [Select]
<div id="main_menu">
 :(